{"_id":"@material/floating-label","_rev":"1686-852dfc683c963cd9b06d8cfdfd437e92","name":"@material/floating-label","description":"The Material Components for the web floating-label 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.32.0":{"name":"@material/floating-label","version":"0.32.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"Apache-2.0","_id":"@material/floating-label@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":"983cc24ffdb77285450a0b563ed9731bbe6da2d0","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-0.32.0.tgz","fileCount":14,"integrity":"sha512-YrcRSK04EnvmVJw2bH0if9zOaag6zUbk41vW2FQZJkkaKd3kQt02d0RqlAJ9qSKciGNb0J0h/EDMcdGpNDAp6Q==","signatures":[{"sig":"MEUCIQDhloudFF1HwIAx2L7eW4zxkT1RbFOhLEwzKQ1k9cRcEgIgMohyI99yGtO1UBChcbCcImhF1cLuw7pYVtfZS0lhPdc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64915},"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 floating-label component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.30.0","@material/base":"^0.29.0","@material/theme":"^0.30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_0.32.0_1520287724680_0.6991244560711549","host":"s3://npm-registry-packages"}},"0.33.0":{"name":"@material/floating-label","version":"0.33.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"Apache-2.0","_id":"@material/floating-label@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":"4a4b5fd5a15c9bbd7e2e4142d7630b48bd8012d0","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-0.33.0.tgz","fileCount":14,"integrity":"sha512-gogkZDAEhct/7i3w/xCKaysMcIh2s/ER005+lsVhSfxnTmhUnsdupLcJj54dtEzUnujEqRRzGyF3J/Eh+/35HA==","signatures":[{"sig":"MEUCIQDZVsuSGeOkANQDyqOdHPFvJMZNW+nTnvezmIbkMZKmOQIgDihMsty5V9HA1Y4WwuVupjaAhmcE5B4R6/43Jc0BjeY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64741},"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 floating-label component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.33.0","@material/base":"^0.29.0","@material/theme":"^0.33.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_0.33.0_1521477601364_0.05808680529485555","host":"s3://npm-registry-packages"}},"0.34.0":{"name":"@material/floating-label","version":"0.34.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"Apache-2.0","_id":"@material/floating-label@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":"9755a18c26df0f29463df5406037e5218973b7e6","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-0.34.0.tgz","fileCount":14,"integrity":"sha512-hsv/qhlajxMgAMlyogd41hidcL3oQgurKYQMEi5GG2I3NTwN5dBCgtGtEtKLWIiAQkKDsUiMs1cBZee06S0wIw==","signatures":[{"sig":"MEQCIF3blq8kMmwhfOx3pDPqskU8Uv4quTIVBiB+VA0r0KDoAiBRibdj3bbnFE7CZfFPvRIFd3xNzS4WxbqWbOkzR6mL3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64741},"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 floating-label component","directories":{},"_nodeVersion":"8.11.0","dependencies":{"@material/rtl":"^0.34.0","@material/base":"^0.34.0","@material/theme":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_0.34.0_1522705914874_0.029038432465085195","host":"s3://npm-registry-packages"}},"0.35.0":{"name":"@material/floating-label","version":"0.35.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"Apache-2.0","_id":"@material/floating-label@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":"46ce1ce7df29ba03ebdc234e07bd800f293009b9","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-0.35.0.tgz","fileCount":13,"integrity":"sha512-lnxBbziq5vvzS78XW99JI4Z10938CvZciiCtx2lFzeRODW3anZugcdwpAH8G2C60+BraAsdxXSzilcgE2ImHig==","signatures":[{"sig":"MEQCIDdXjFbRX0GPvKcOIygvoC6LaRmMKU5+OHlOG28Kb0qxAiBTFPZaw/SSWyVtUSPl3aW/rjS6XE4OLkBU3ROQW3SHJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDRCRA9TVsSAnZWagAA1jEP/2DxmPFaC3HOBVTlIQgT\nS0Pav9URSggympynOBbwej01VuFycdk3+/URKyPpxFDRfZ55G0KNkRPCmdAY\npXP7j68QDGiS714OMqQ9lRA8w2im1RJtGLz1pJOYxrVmz2p4y5FzFsaISWBU\nXsHT5yFW8AJ5Cga4AuFS8/dUMeYc1jH+uP2/qPXaEFYr/IsEiULon+/VLR8p\n8ZAMVb/g4ZXNL9BM+ItVpLKTcaWCYm/F9ruu/IiSZk7w2XxcNoGTpnsVf/Pj\nXghRxdaZ/3chlBt5ONfIJgRA1iqOqqDzP/ET0ECMh7Fl/VZzlnq4aSVVLXq7\njiAJfWtzPLmY9HIwj65ZRr6EECxGZUGMIYA2ppWaGB43oC3v46GlTHw082XM\nTZHINTR8PNanoXsGlgEjNijbTBV1T9W2g1fyepW7nN4UYCZTYAb4deUWhs94\neOw+Frkt3lA7mJCjTO8X4+R3mZbf1hn5GZ9PkXefuxZcPmRazH5YJGUrNb5e\nAMJaLJrG7Qp3rhCBZFaQRyGqBgqpQ1Mgqfenj8iQ/uCwGBjDaH3Bpxif3Ws1\nUcpe6nW5/bMg3zmgVloqMfRF/KykT7WyEshDheb/MqI7LKLzVNo+nEKm5Pg2\na26lwVEKet04bHzJ5IdhzOhfjheAgxPaavuVA24CbaquJGHciTYaE+qzGFOB\nOnK3\r\n=PDip\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every text field and select should have a label. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the text field.\n\n## Design & API Documentation\n\n\n\n## Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Usage within `mdc-text-field`\n\n```html\n\n```\n\n\n\n#### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating above the text field.\n`mdc-floating-label--shake` | Shakes the label.\n\n### SCSS Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n\n### `MDCFloatingLabel`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Shakes or stops shaking the label, depending on the value of `shouldShake`. Proxies to the foundation method of the same name.\n`float(shouldFloat: boolean) => void` | Floats or docks the label, depending on the value of `shouldFloat`. Proxies to the foundation method of the same name.\n`getWidth() => number` | Returns the width of the label element.\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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 floating-label component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.35.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/typography":"^0.35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_0.35.0_1524523216120_0.8308305112904824","host":"s3://npm-registry-packages"}},"0.35.2":{"name":"@material/floating-label","version":"0.35.2","keywords":["material components","material design","floatinglabel","floating label"],"license":"Apache-2.0","_id":"@material/floating-label@0.35.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":"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":"e2809c4201aaed1fbe8e0c2799d2785625a3fed3","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-0.35.2.tgz","fileCount":13,"integrity":"sha512-Xo47tdp9Eli66D3kVcLcAwnPsYAqQgb94uVMU8y7KUWI0owBsRHejsMla7dvU0rBJSf/wWiGzNbETl0lo3x2Og==","signatures":[{"sig":"MEQCIHuhBeEcZVNP6wsiFKnB028zZ+O/6K0PttM8jk7nkjQRAiB4VP9z7srkBuJ4+j2bQKQOGFLyF67JecFofyDG95F5Bg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbA0ASCRA9TVsSAnZWagAAsIgP/3B96tRyOv2gTmc11xnP\nLk++6qST0g0duEl7gqH0fQ+CkU7rqhxkiarLwYKCGMS/YabW94Br8VHmMp2D\n6XP+DIpHNg0ya0P2jZID9UAUrl+6aCmMjYKZEYMjXRwm+YE+GCsvFqvpGNIi\nTQ8dz6fOPzzyPauqFto+7l8HgqLDUnpDM5PzkdPcNHTiwKFtCnUCMbfxdnW6\nQ7GyqngqxTCL+6qcRIqacT3BG8tJ1ZyOJA3S75o64IjAuSPz6kVFl3VuDeeq\nBt6P3flNh4rBCfA8Mh5Q0MR6eIjXxIJ8i0r5pQ+tt/6XR0xXzzBc+E0tVxbX\ng2kdxT7w228IWbQdnFIpUychTz+khD9icGzxaApfCOxerMM0JAFBlqDCzwbw\nzy/4f1C2FoOuRHms0RTao1l9pHDu59P4+nN5xuixt/1LNe8OEUQNhwViTQOD\ng+PMUM6+g0zw0lqpuLSDfMFWoFiB4QCkKxYglAsRyZuArIdi5l3Tm8QLlvrk\nblvW6iMsMpZ3spC/h/sci5A5Co83VsbhhmZPay3q7p5v972RW+rs+tjRJ3Wb\nD+/RYysNcP+WxKrA6c9KZLed9RqdVj/0fTr1Ju8HRU75M+nh8qzrodiXMeBZ\nSa2hJt6uW3jzHs+PImpbzUY5e5GDYNRaIvI+rt5Gmcuw4R4cqxZOJFJR1j2a\nrU+G\r\n=CrYF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web floating-label component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.35.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/typography":"^0.35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_0.35.2_1526939664392_0.32664424602388653","host":"s3://npm-registry-packages"}},"0.36.0":{"name":"@material/floating-label","version":"0.36.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"Apache-2.0","_id":"@material/floating-label@0.36.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":"309f50234f42da0151ad6c0a3d1af7dee9172cd2","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-0.36.0.tgz","fileCount":13,"integrity":"sha512-hou0x0zm4FMbO0Uy9qxN/iyQznWghput+/QXSfyBE9fHE91EDFlZKirUwzmszm4B+Z3guxo04KZu4N4h6byCsg==","signatures":[{"sig":"MEQCIGPDDNT7T91+WYvSu5xU7A+sLh+htxEjt4ZSLBfeAAFoAiAOpFZChZYZ563bvI16ALm9floTesmn5JjDeWllpR7MBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFVzUCRA9TVsSAnZWagAAFGMP/i5s07Sl8RX9kunB5wPc\nnHDHK/xUhtz4HWlyS+gQNzeVCeiEIGdltD55eQ8noH5jgATWcTUL7mkYEef6\ngWMrEWOCHlw/024DWpAFACFNilrAkmvUnQjjkEF6u5PG9Zm4Yl3WImmxnqmv\nz1Zx54UfLaz8s8tEejlO82SDxkIhrozuQ+/03Is0dUZrCimjj4M5dR4dgyN4\nyZai+6/rq6rPjs8lKa348n5uHtLgfpJJ8LImUjInidC+FK2tlcqeT8UYKFVO\nmxYaxaHY34re3MrQ2TsnIrpLVONtGHqVYhu6NUBIndnHUz2rlqaTbDAt5Q9Q\nijiNasopnXXd1BGcJeSowuhBb5V2WO0FOsAXuAuPUs7oO/9mK0qblRmtK0H7\nrvLCLJJClTUbpqWUk2+yYxhRO6kNb+dwjqPAAJzDILlHDkaBtQJKlIiRvC2Q\nmLo1YzHjDp2WfN9ooMX5WPRBbK9LyZHxQcXafQloHjf0KW+muE98T1/2NTjG\nrvJLaQWDN3vPbNIbPc0AAOx1XuTaJyoUrlnOOX83gNb2GWU7XqP728vXsU38\n5d6hWYHe7b/J/29JEPCpUZFd3s1TgmnpuYDjuAbNrLz+wTKBNW1qT+3x3zUp\ndgTrFGxZ7f8LgXwaaajdgO+4Lsc0haOweShxAJ0iPXv9+fblp5V8VZGgT5sL\n7t+9\r\n=65hi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web floating-label component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/typography":"^0.35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_0.36.0_1528126675203_0.49859632213077454","host":"s3://npm-registry-packages"}},"0.37.1":{"name":"@material/floating-label","version":"0.37.1","keywords":["material components","material design","floatinglabel","floating label"],"license":"Apache-2.0","_id":"@material/floating-label@0.37.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":"7251e1a9b2b305b1c8acdb9bf19320825ce1a88d","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-0.37.1.tgz","fileCount":13,"integrity":"sha512-y/nH5zh56HvL5do9vZ84/ky70Cdd6/ws+IXXDPouUp9MFSP2jhXuuWDDns2vYFIZI/I58ldCtfPsn9bJTqmpTw==","signatures":[{"sig":"MEQCIHXq1t4CE8cMqMlOEXxECTuliYWELKc72aEdACHnwB8wAiAGDeEoomwdS0uzFZnqSpbBc8+06ZiaTTsg53CszMM7nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTQvZCRA9TVsSAnZWagAADCcQAIMyjO8cxCBJEqEaj4t2\nN8iHMR4r81pnN/oUyA2w567M65Uj0/6Uok2N88OkYxcDAj39g164ic4Zda/5\nwghJC6GY4Z818OYJzUuas3Rv/4Z5SwqjzJZWZ91BkCsXou5dhwaLDe0X9E63\nI9OjHV1AiA+DBZRNQLdUDGdlUZtyhXOkgn07fFJYKXdnd65sGL+3qykj4YEj\nglRbPfkEHEdAdA+F9D1QZabnqERTdWMRKYgTrx3NrfIsj9D3ysCqef6wznox\nXngVkM2tVQriYHpmNsKnL6I7ylXu+NrLzLZLe9o1tEdDI+uUFYcpVoZTn07j\nYAGBXbtUO/nPhFpdOPJFcI/7tpPA9DeTj/2p7e6PADcMYtru+7qFd+y9Kf1g\n/8qhAwG6SrKUEv1BU0F1QV1fs9m95C6xA+3dk/FHVSvkQaS3wm3tA/5Sb1w2\nFBqa1AM9thLx/rKf1cIpa6l4iHESOO3nMwrqFND6OeA+N1DWm3qVONQQGpoq\nDvbAwFjAw/OcJ1J9SIV9X9jF4IJsE//uKKUwskvm7oF+P74joHayZNC3/1dD\nTmVE45Z+gmwOOmoUEr1BExHXAeUv7lNkitC9u5JmPj1YpqCw3OMSNPRSkKuF\nHQ6tnWm/0Iej+KhEj+no5uAmr6f0cMRAs9mmyGDNxDtRWlPDKz+hy1z1Cal6\nLtKE\r\n=9KR3\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.2.0","description":"The Material Components for the web floating-label component","directories":{},"_nodeVersion":"10.3.0","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/typography":"^0.37.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_0.37.1_1531775961220_0.6326747133313266","host":"s3://npm-registry-packages"}},"0.38.0":{"name":"@material/floating-label","version":"0.38.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"Apache-2.0","_id":"@material/floating-label@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":"557771f8b9d05d0cd7ec6b3bb13ebb0d24d65ab5","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-0.38.0.tgz","fileCount":13,"integrity":"sha512-ga+7ELYrkiRYMHqkLOnCKaQUvGowMYXqML3I7hBhs3eEchTjx42U7bfTSqbfdiNG1F9+cOcSOWTKug2VOkYlkg==","signatures":[{"sig":"MEQCIG5eSTNH7bB6jVNi8TmeOS7fnZyAEAxZHrAgHH0ItFKBAiBULkZVbN7BbxObABdkd4WgSJ86ByR5WfhgpCKJ1ueGGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0WFCRA9TVsSAnZWagAAnUUP/jr0wUQSpL0lplyQUfX7\nCz48WW/xOIv6SVGfC51F8ojYGAFSPQ0Wm48H/ewIdxmLrg3G125OJKyGPV8Z\nQ9AMRCt9722cSxZz8R7Nrw/gU73yekuEvjJkAKxB/40V8Abcge0eQlTHJ1+R\nd8RnbsM81SX8t7bDG4+RcGstJFlicXJjukjSZfquPWSWtIFtVTO8KoOfhjmf\nStXSel1YyRJ+WYZ0lmaCszhT2cKl7aK02zlTFwGSriWe9iyOiLXMZEKSy7la\niq+j3ekhlf0SrdSqrpNr3wmfmUV6x8ZyWIT93kRj3HS0g0EMB8I3gLt49uFK\nQzUs4YzpXh/XuvMG0S7gNMRSls1dA/FCCuUW58g5TtdLI8UieK7WzjxjqceE\n4VUluvM38TBpYAnySORhNuibEfGWz0w6NLfNQVvGHTNE3LylYRH2A1ey74zQ\n1/Plnb8VttjMDYIhNJ+u03pclqpubCiJ3TB0ovnY6S4ShLfhd660QfX1JOso\nQM9q29VqSFQMUMt79Ku+2szIFi5GMOYPY4KiHmHXc2QYnRUvMG7EC1Md4tDA\nQ7ItDtHTXQFbV6pVrZxaQxLyd7IOq6h2peaBycmcAfnTFYAr4fDeA0RaR1iU\nRU/BamAH/ktWqzHcw7hXL+wBIOQWnBKt/ld5qwuqxP1DmfX9NRHz1NRRq0D9\noHY+\r\n=MGNe\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 floating-label component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/typography":"^0.38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_0.38.0_1532970373576_0.323537767498038","host":"s3://npm-registry-packages"}},"0.39.0-0":{"name":"@material/floating-label","version":"0.39.0-0","keywords":["material components","material design","floatinglabel","floating label"],"license":"Apache-2.0","_id":"@material/floating-label@0.39.0-0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa403d6fd9a5e24f30d147b77a9c1a2a07d0a7f2","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-0.39.0-0.tgz","fileCount":13,"integrity":"sha512-rACc91k/wS2Qa8Ju9D8Pjwy0NxfjgGLoq0Eyl93fEkGCgr2UhcS0BrRkNsYgZSpj9mTQ692Rmxy/Bub0cvqskA==","signatures":[{"sig":"MEUCIQCeLe8CIP5XTcyx6ASf4eYfltC8VP/oymqkd3WHZLJsXAIgDWienlteJBz9iyAKgtwMt5G+uKZSS+QXl8fepCh1GzA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZU3CRA9TVsSAnZWagAAVKMP/R2Aj4fYwWJTxb6Q5Fzq\nMZ/US7Vo+8bU0ZSaD+ZH+2TXaT4YZohkA53DuWvtbKVklAHxoI/Nkd1YpLCD\n9lTUBsx8vZerGLEkjQe1UkJc1iH68EXtC9T9nXe1mFt7ae/Kw+mcrTP1LWe3\nDHUY+qlZjFexazihidpnANHe5BpLUi4Lg9FvPWGWqlgQitFyTleYboULWOcP\nNlOQKh9QQpQlwzGo41op4AMxmjrMkdwVug/F+O02fR5/Bx5hYTuAQa7TpJE6\n+3yrKNVx8a2rKvHXB8UiGy/W5bIVDAoMF6mRh3WkQ3iFubBhgA20oKGz0sbE\nasdSH2DSPt9TOoV74Xi34VrOy4Acz9nRAXDA9U7lcHbXDHe23VevA/xgMd4c\nam0OqdsCMCDzMVe09LWOk+pcae653o/j7dydjtTeWYdIYEAqlj1K27+s0CNY\nCiA98eS0WxBpa9oq3wDJy7shT0la/4hlpboHM+zwuzEw1UFMl7mJbbQayx2z\n9IK6z1cF0GhfQiAyk2Zr/uhAPHpO23n6Y8BniXwj/s03PzGm/LjBA02/WsC0\nZKvJZRNRsqenhkHziuhR7BKsCJr+dufnw9YaaRgsscjKAdToTOU0i5Kf2iIT\nf/n09nnmUcxa2M9twAVGhCtibP9x+d6dn2znBKPbya44CEdxlxKwZ9dctBmF\nwoC7\r\n=mf9n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components for the web floating-label component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/typography":"^0.39.0-0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_0.39.0-0_1534432566846_0.7511534597464633","host":"s3://npm-registry-packages"}},"0.39.0":{"name":"@material/floating-label","version":"0.39.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"7dedf6cab6c629202904e2c2adcf098de4068b8a","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-0.39.0.tgz","fileCount":13,"integrity":"sha512-jwWU2+PtyAqM2dhR6v1ABesOhGwK0pi8zJjdkrj6QAPcF53/4kiyg08ac7X2R/XYuMgXdy+sfZ51oirj6W/sEA==","signatures":[{"sig":"MEUCIBCKy8UHJ7Q8jcjFDOyEnQdW5bZZ5VVsWVsNP3DR0QLxAiEAwBY1jbxhCXDn9WLSuj81UVnhvT8KW/B1P7yh/WfG5Do=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":70179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDd8CRA9TVsSAnZWagAA9s0QAJ201nbcz2QnQ2aRbW2w\nD5nvGPjnMrhw2uDLD1OXzQ4gX8g287i2lYaqdgTkRHOEWNrig59/RcsABHrU\nx7FKHp8OtZT+9QLMC/x4UZYqLb7AsJX7xDQlIi9NU7/3Rz2XxVjMA9sN5YuV\n5TWBdVIsHsdHudGnXdUbUK3303Js2n9BppLz511YvWLpl/hFQTg23PvhhPcQ\nAZb3cZsuS3h+GbhGuDC+2KMb4SlDe8UBhRCSnha5/xxQTdGU9w7b2mftCCnw\n2oeeKkoCr6Rw5xTccZdXlNHGHkCop77f5flSg1SiW/azO88zzwHmpOxqWvG9\nG1kvOeKF9HK6r26yOfoGzrgt+dEchPQTxnSQzD1d/n/zEeiJ4UDkCwY0UjUv\nhZ64RXc0MKnso8wWVWkvc+hplf0HihfvtlFvvvvgHpqdXw1CUuMYXiFXTyG8\nQRjZBt2oz8LlcGP7TQuZOs8zvPKILEyDm99g/qG2Ev7GdtVioXxvjIz/Azpk\niUPeCjL35cD6jpoZGM88mpFQ9kQR5nuBogKuKBFA+9V67TcGi2PcWFDsPLhy\nbgjaSQDdkHRwnZ8eYLm9n7GZLaO00ybe8R499ChhIW0HhJ+Q0T6SjIuiIMZ8\n00NykjvADqzxajeHPrsg5G6CIhVct+JGPNOS/NpUC5Omyw0E7Y5bf6yYQLvL\nw9gv\r\n=Bu3M\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 floating-label component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.0","@material/base":"^0.39.0","@material/theme":"^0.39.0","@material/typography":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_0.39.0_1535391612074_0.9057877622724209","host":"s3://npm-registry-packages"}},"0.39.1":{"name":"@material/floating-label","version":"0.39.1","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"8e5f2144460086ee8d586d6715cf0ed1707d3406","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-0.39.1.tgz","fileCount":13,"integrity":"sha512-Ry833abXfBsjdNTRkjSfsSzhV4RQ0BilvpRnP+6uf10f5A8UVK3rTBMJv3TtF/7wwojJtbgf8wAJz0JhZW/7oQ==","signatures":[{"sig":"MEUCIQD/GqB6bh2/Eif4tXYZIv22ucGb3nNW+kH+J92yvm5AhgIgKXtAnHf+e5/VBowwjveO6/KMqV++uFYY8ztAixhIxsc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":70179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibTHCRA9TVsSAnZWagAAYDAP/iJojhbWwkF+I7pFDzHW\nqechYDJnDSl5UM21OH4OBkReO/4L+viKnf0LjppXQke8lrEz995oMsolWr7Y\npVakDV11uExL/cdvFuSfsbpF09OZxCxIewX6Lnw5Mc4ag5ZltuHgyT9OLqP2\n1SiKwuGevvhzwEyhYfRfNKvoaaPyxPYMjuIwTaZFmFH3SXe4OE6+vd06prXk\nPdhTWhD+a4LqbQS+45xjS1wYGydlvyAslxge+k3eZxZwIjssZsyb/CMEpJEy\nN3tAljKC7JRP7vEmJ+GLxWij6gQj2L3jyV6jsVhc2DvchGmCvSZrNwc/0nRw\nehzvfsdf38hpc4lFJCTTxVYA059HjZvU4QEc03ba/Id+iE7UqCE+8GOStyCo\nbeZpf3JChgAyxNBawHX85pwd60FMmjMvErpyidhdDHta1puvhf8qWIui/R16\nszBBERsDnh5zkGWjCIBoDCQxUUILrAplvB+C7ByotXxdmv/MhdlOMi5F9FtF\nQW0lAIyTTGzlnuTyAvhssRDV2bWRkPWPHZG8NKkB4v1CP8lWps2IVcatxSlz\nCZFtWubsebjBkE+Nc1pzivIfmDBAzh4K/HyCqS73DgDgjovMGCtOcYGN+xlf\nnh1zHiwLTQ+Ew99d60ZUqR04N7o/cpF0ehQ213dmIgF26gEF9X69iAnrGNAA\nNWLw\r\n=eNRb\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 floating-label component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/typography":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_0.39.1_1535751366887_0.6542226458425684","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/floating-label","version":"0.40.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"5edfc0b391a58e2802031a6bcabed350c0130722","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-0.40.0.tgz","fileCount":13,"integrity":"sha512-p+jngOd3r5UOeKkYZrQfFzLvWkWRupRMYQgEoz7EWbhTHEWG5s2vcFVxPPC70HgInvS5O7g5DN7OvK/lZJcs3g==","signatures":[{"sig":"MEUCIBV3hqq1X/Y5YhcTsrgg+72PEjLWsjPdNd77rBi0gezPAiEAjbeaaC1oIneqLurFWEE9KGc9spu/enp+ys7941AZ+KU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":70217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqUJqCRA9TVsSAnZWagAAoyAQAIMwaTMZcmdVePI9W6rW\nHLoxC3uiGaEW8fE8YTZKtkQiHzDv+oi4dKKQjc5mN9M0RqKgS4UjhYcbUHB8\n0Bo4h205Cej7HUpyt2fpcTkePv8UGihz+9ECRBrT2sKi/bkh1Gd0hPn2wOqy\nT3uS4xwio9gqY1OCn8oOIysqGsh6SKL2obeFpawukf3fJN74kps+hpPaAu0g\nvXj6YUEGq9HbCY+jX1s/mGqF5soNVdEKioQJOrk6TGC0tT7QTorZlUOwuT/T\n0FK6Sk721TGPjrpF0fprzt2t/n87oQMuEFex8BNYrmV+wgQluYUB7WLSqo1D\nYU78LWf5UM5YgTgrInuxCJaCf+bIhje/CJvUoV8lGNUsoRWTscAtdgK2X8iF\nk1ZFzUbw9FwZcvu0KwI5F5eLiVbv4QDyHC/R0vfw5puSudF8CVfYk4XkZlih\njGeK3r/hxUD94nLklDIODGmoCLITUA5HfsTJBniQVh+TJ7pSJff80ErMInNp\nzCRYs1Q6SAiuWZq/FyeMFB282bovYGU3Wg5L5E1DgxaGjVqp/9JmydZ1mOSL\nFX1oRLgyDOy9U+75E6iqR0Q4EwdJIjrsgEwNVtQtwoJmaeYUvXIlrAAagZbL\nlvMXrlKvjFATg7fTHrf66BjW1vRlTblWiF3f3xcMUG7p65o7ShiN0I68h93z\nr1VW\r\n=YLQK\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 floating-label component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/theme":"^0.40.0","@material/animation":"^0.39.0","@material/typography":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_0.40.0_1537819241724_0.8137837838513775","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/floating-label","version":"0.40.1","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"1f025e414fde754d6d1ac57757b4da207ed01fa0","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-0.40.1.tgz","fileCount":13,"integrity":"sha512-b8/Wj4qfqOSJRSoQ1X7EC2lQc2hF0IGPXIbGpanZYe0c3wnhRXdSYd4kUnDw6rHgKn2IfnOEZkzOetODkftWDw==","signatures":[{"sig":"MEUCIQCkZ9nF+Jj38nuhvGuaK/B6/wOzL7KODgPlBeFGYMXKUQIgaAhQUACkWPWNhpfLA65bTKgFvcU2U5IvsQOL8wt+cks=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":70367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8PuCRA9TVsSAnZWagAA/7cQAKKH/JY8M9pPKGtYng7P\nalalWDtMg11dZoL8cZY7ssMQhV/djrQu4tVV4yrS+/lJRkOp0I65bI9JNdcC\ni/Kn/fnvTTRLurSB/8J9ulfaodx4TkAd2A0ZGOkPfkA+Mf7CDHEwKmbyAdkF\nOtuvAflBVgOSmEgzgh0j771IsQrXm18Kpau7ldLjd8zLMrlVvDRDPkvEG+4q\n1AFxuqHXeAmcz0v491+akFpheuLvShElt3lF7K7rH4egWfmPy6kRVHLPLZDB\ntyKqvn6+yAvPJcfXhW/SPUfhFXv6k3jAHaJovg/1fe6ExXHm7/bYliyBO8tW\nFe11y7ozrbYWBFgoxUNMqiYIf2qwaTd+OkB+GXRNZgdyh8oqa2qcA2mXE2w6\nTvnsQ0cGZnd/S9xnn7arxjuSJQUFjf2OPYRjyk0p72q5Xze+2/4cDOdKihYY\n3bTbw6Y7Dl9sR1NyXqu0V32mrfWBf3qLzivGtynsomDqo0NJS/JqAGglkVvP\nNKrbT3/DOykr6z8t27Y0+ZJ6RDBeOhloDDe2/il2H1DIc9OA6vwuMtslaWiC\n79EUzd7VKscyl3NWvyIEkjWaaJgecvpKzPSQsdMgCCioPSzbOVHSGwPV0AIT\n/gg+cTT/72R413zMkzpJ9Co3YScnTU38u4rY53ClRLtXFfcn0jS9PmLCITVB\naLwq\r\n=j6fb\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 floating-label component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/base":"^0.40.1","@material/theme":"^0.40.1","@material/animation":"^0.40.1","@material/typography":"^0.40.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_0.40.1_1539032045107_0.6358383061742372","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/floating-label","version":"0.41.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"17a9af90199b3bcf0ba13b1b5d3616451c7c8c0b","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-0.41.0.tgz","fileCount":13,"integrity":"sha512-qI6f1nZU3crXxWAI9fw3U5fHw2qOzEor49EvskbcaV5KSRW5qO+jtfUQ3ib/Vhki7lqhgwNHB/0n7KYhvhjRHQ==","signatures":[{"sig":"MEUCIE1r1TwXmD1VfbGYGmx6gNFl+MfVpEdw68LURCYN7hcHAiEA/SkoBxqqa13gUFKKf4M/u3ICleP/9yNfbiTWQJCM7yA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":70442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12vYCRA9TVsSAnZWagAA7XEP/R2Mw2v8MTsOJkAECfsw\nysOIUEHDTBTppObpGwXbyOWNSEFzYuSNRq4aVjRZbrGRCY3MUaCDFu9pbS1w\nNRuGHJHlayQeJCmMdPID7FNMTtrszzU5ZtmQTF0uT0TOoisp2ttWHNOsxh/P\n1v64lVa6kpgeBta7R0jQcCbqw9BXFHvnpqr+iBeURIsHrIoe8rWv9+8WcR5D\nDwEJSyQMjodrb342jpEsX+odaQjIa4wefX5MIsWzDzNXgU/5UR0IAccd9Xdg\n30YJ/feVaalASN9kaUrT/7bvU9Z3ZUIPCU0vd4rF6lWY9mXf6ZTB+c1pMRdw\n7Xu8Iwv8iVf75Pk0MpV9xMbhEMH1+KLXbYCK5XbtkPIHep8fgS6stt8MSPvm\nXGczy1pgqzItZPxKFvggFJDQCtaLino59s9Uh9qhXsmAeOTvXkq4poLALNhS\nGCjAhAo9Zqy6JAwOulTb7Gj/4MgeOUlrpPGICWLdkQiDuE8f45AtNI4Y3Cbd\n74eidXYad7xAY9Zvn4N+fliK+UFPLq9afCeJr6nhT4kBoGJvLRAI+sXQuByv\ndUqzKpDlKP+hJ5+XZHElCqdzoQy3cqU5aGCza2o53gtCGZXtg7vXH3L4o+vw\nQUMRpItcpPFWqLB6ifOcyHWQ8s19VcSDib7PtUmF4bma7ia8wH3O9pvwSRHh\nhESP\r\n=xtnj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.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 floating-label component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/base":"^0.41.0","@material/theme":"^0.41.0","@material/animation":"^0.41.0","@material/typography":"^0.41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_0.41.0_1540844504051_0.9389192108013602","host":"s3://npm-registry-packages"}},"0.42.0":{"name":"@material/floating-label","version":"0.42.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@0.42.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f460d90b30acc2de83e5b3c664545b89287d61c6","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-0.42.0.tgz","fileCount":13,"integrity":"sha512-OrPRQgFztQnH6Fj1vzvLq4LJQVUqYB6Wqu8xBnWGuR7cILnnH/gt6AN6ZGeUBITVKiwGegmvzUdSaH/VWB5IrQ==","signatures":[{"sig":"MEUCIBa8vKR6y/xn2I6vkncovkCD/aCN1GEIZhuP1K0UEQZeAiEA2VpLdl9vrNSQ40RJ9GtBbdAHzifYCY1ExJyJFCG2ZAA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":70558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBwW7CRA9TVsSAnZWagAArwwP/juwh/W9Xmk9atSf7+9n\n2GuaJz2hiUcyCyL87I++lSxrx/fYQglG2Q9Y9NpgoS2YsnHAQg6yLyyc0Unw\ncReKd8+MAkcLifxugYsu20njS3cjGKddkrcy2zRQfqyGp65245qPS/QkO8BF\nhE5va4zHwK/ZAc+oiWVmPWlMqeHpsEZtoMi3lYm669Evpi3Cd79NFjFY+xlk\nFUuDM4TbvuVjTpkLgViLPAmbwYPXthHjfapefGsezEEHxWUedMalJWZztbVX\nrEbbb4Db6xMCYsM/MG8FEVz75jtZvHU+RCLkQEdRmOetxbe2Ez72O3j1vu8z\niCJ1elB7ySXqefAc297N/zbm0Q916A5pUMqwZCjunuJqUpPTS9PI4gqVjieN\nqeJMXTqWJNjBloHkfybiu3pOEWf7diBaZeh9UmOR1XlDvZJN68hykrr4GD+O\nJL5zhpS9pvzHoePPHm3pWB+EIi3t2XOdP49ihRSyFnyWZzdfhiimuKO5HK7K\nRZ4TWmvALnCJA58CfmBZyLWOsETel4DuMXCUrSilmOsNzLIHaOwlrD7ZjYsk\nvpMKhvYySPeaZmR9X1zfUcWrFYw8RdgeJ23gNF4UQ4qxw+M10O/+26hTrP2W\nookW+xZmXcEBa8sfjt05S9hjCik1L+bm0TkXKm86FvQd12ByShY+94ePKgGx\nxnS5\r\n=ZDSA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web floating-label component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.41.0","@material/animation":"^0.41.0","@material/typography":"^0.42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_0.42.0_1543964091155_0.3136435742266188","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/floating-label","version":"0.43.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"28d4995f8eef125c8057016adca669b09c7be1f2","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-0.43.0.tgz","fileCount":17,"integrity":"sha512-Wb76MA3b6kkhgrIzDX8DOdFyzNwDrVEzH3fA6yOhQcOSLHnc358ofcAXgcr7/Db0zBuwhDi176QXBBET49uSgw==","signatures":[{"sig":"MEUCIQDGWwTOWNasXuOi9FTfHHgVVazKIUZjorqimCN7W+3HQQIgbo33HHQqMAvxFpv3l1fBjOHSGYDoKRSoi4R9MBua/lQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":196332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM60mCRA9TVsSAnZWagAAvgAQAIlJyf5CW1csEclW8ls3\nS+Q4bEwmNNb0GfBtBgrjQVrl0xL30ZBTk962gaVtObGkrz0s/UmFioRK49H+\nE3w/+Co0zEk3eGm8gd1yqgM0T41lMYgeOAKJiBc2ihFgCYfe5qMR7SgfNPPg\nRdmHLqlhPv5/xmLS1krM4Wg8UGGBlvzQNBcexCp5SKlU54kAS5Uwgcf88iWt\n/Ngw7YKfzM7gKWR+BXeRcFCMGz3xL5DCdggjJkTff7JjZ3BmDhesJIZLuD5I\ntjiW0KvhjBEpQLteTmdODI6WeszfB9YZ7/3pTSdj8OM/30imFBPm+OeH1ejw\n8rbgm3BYIFjUVM/AuOgxLe1cdsszIzQimRVN+Kw7i9rfvIchAi+LCyEzh2Ql\nbsWcJlH6BoU6N2B7PCQVEO5v6J+BWBZfb7fNt/AgbqfX60AYMEBhfnUaU/2k\nAMZb73v2VulgftTifRxItFqyrPkXDIEQGTOpbz6fBEvrkLnlkbnyPCr21pxr\n//1u7mgITZkMtaQ2hcW9ugF/h/pxEzu/nnUxW31Z4hyyyMlyZFrBVk+vP8l5\nGjajXDJ7uStbBcBSXCdWdw8uyMZKg69l9rhUUL0/PKeylc/99kIj8VHAqlZz\nPTlbADgNehKdIzZtNybzlNCOUP7d5nwdTqOouZZj6DD5c+dCuwCDBIDUwLWB\n14tX\r\n=ZguB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.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 floating-label component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/animation":"^0.41.0","@material/typography":"^0.43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_0.43.0_1546890533860_0.5899963496341927","host":"s3://npm-registry-packages"}},"0.44.0":{"name":"@material/floating-label","version":"0.44.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@0.44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8694cd49f6905641b67a9e7a112b820d028f09c7","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-0.44.0.tgz","fileCount":17,"integrity":"sha512-k4npGNxyMtnjgJZNjU5VvqqaUqlbzlbVAhepT8PxYTpj+4Skg6PjHwieTCDCgsbqHvFcQX+WfUrSZXY7wFV7cw==","signatures":[{"sig":"MEQCIGUoLrmO1DdvpK5fxCpQvfxZp0rZK7sx/gD70OUTFL7DAiAPCpvEv/Q0CD7w9pnBUqBSePOVcfQexXIjzRG6+fd/VQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWIMnCRA9TVsSAnZWagAAwnoQAJgTrRLY9oQKLSmW/TaR\ndLQT5VSDe4EEgttlXffPOfX+JaS0VK6R1MGcE6mw0Hyq+Wd3hAUkOq4zBAFE\nBH44uk1FXSSopvlr+O85jPzZI9VojoPFuHA6KhJOLtdiewjZp+6ud6n5flTx\nE8EHtCpBspBNPmmoZjfg/U9NmQ/hw3bbhnpFTB3hkTm6MxMbSldvnMcMZMgf\nX0mRCO4F80WrCowUowClJ1qdTvFSDS9F2swLArh/WDt7GC4RgxBii3UeFp19\n8AYLK+U0GWv6olFZ4cjfPkw2ZMNAjku+yKUFX63N3DgInF+E4MdXE20SJoKk\nj8R3hMxLTha8S8bgFi6KOhlG5bx2XO7Puhp0FjJLfnWEKuwMbmNBtY93qirK\nNoGUiEAqdyts7moe/P1SdZFxEyuxtoC7JFRDS/ajKKulgJNP4752Or1yISGX\n/EyvhzOpzq9T5VAEhCVQ2AM7pmWxcPoVQhfPLtkXFDbsgedYglRdeo3P9h11\nK5v538c8E13i8eUaA3WvaXYtb16OmImWHpBaCeDwsFrO22Lkz8I2HEOn5wdY\ncupwN8Dgj7jZyblOn7PtCg7o65Cd6Gif1d73xWVlZnMAh+dTN/APHnlvUfs5\nlRNSEc+JxKV7fJ00M8c8ztPlJbzwOz210HkE07k8NG0lGet7TphC2NsLuqeS\njbYh\r\n=Sdnu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.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 floating-label component","directories":{},"_nodeVersion":"10.12.0","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/animation":"^0.41.0","@material/typography":"^0.44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_0.44.0_1549304614517_0.19625091250862137","host":"s3://npm-registry-packages"}},"0.44.1":{"name":"@material/floating-label","version":"0.44.1","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@0.44.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39af84a3a0abbfa6d210911d5f4200a65c2ef59b","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-0.44.1.tgz","fileCount":17,"integrity":"sha512-umj5q5feJcZuB8snRX5aVBrwQNnrt/HcvN7pENzgqaYZNcmBnxRl0OutTlHCn6l7OVU9VlWhFMf77DYwmMWKJQ==","signatures":[{"sig":"MEUCIFBgZGdYIo2FR+Y5gGrVYRljVTITY+RO+zOXTg7YBJgmAiEAphZGL08NuQZUFon4banQOcUB8kYJxRtgq8H3oL/qEGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbIscCRA9TVsSAnZWagAAFO0QAIjWlesBN9WYi8278N37\ngeDuCSkwtM4fNDyrM+un+CaMi6LyqLOMYpE7MZHAky4qYfn+qwuYcgNosrDV\nja5EUjeHveYTnZwH2cwUHsRukIQCeOqx7c9Pw0SBY4yLjeXyfCulZkzhuXSX\nP+Ryvzicl6mpQP1mIQJ8yP+pclb02uiglSW9vU/u1TxfJCh24CcYKg2cAxWo\nvfajbL9PYQLB0lxlEX0OHNqQISj29lpTRJtV1FJg6KN5wHm+Hg8IG17IScUN\nQ1pfrMF2jtDeVj1V6tpC3APzTq0S2ugyvwsPTj9OQFhYI9RDffVjuluvZU5B\nXHaR29GLUAZAnF+f+tbmN0mUMAmKfDVsH2M55oJIJ9hzI1zxqknnl4FovWk5\n56kDgAtjbUsuhqqEss3t20Un0RNGOfCDhdgn/WxhcJBlQYmZblzsGtUrcsEx\nqHoYw7GDoapsA+2mC11u/VIwa0jZxvtxiLnktutz6kiNhzEPau1TozhKXY/R\n3pT8dFwu9yW4L0UheKa1RzLyqbkiErgVZS9S05flaIaObMUS4HH4SIk2+0UT\n4dMnq0yq0VXuMCLZ5hbsdBs5MTa/g+Tf+Oy4eUac3ezRoRrh7QigicYdVD61\nZuYSLHyrOFUKf0i+QPADqoh/r38bGPuQchI554nlGYn1W1ZZEiEqhdXfHZ0/\nCIBr\r\n=MQ88\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web floating-label component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/animation":"^0.41.0","@material/typography":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_0.44.1_1550617371976_0.3267712730596877","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/floating-label","version":"1.0.0-0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"8af06041b3807508f76dd2623d4e90ecb2ec4336","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-1.0.0-0.tgz","fileCount":29,"integrity":"sha512-DQ6ZNuQBFTAyMr8m1SOEm67PeQvPgUrepMDHnok1kYJHlReWJYZX3oouk/NGn6bqcWiX7u5ujBPwa7lAYJwvOw==","signatures":[{"sig":"MEYCIQDnRG2QLLwfb6X8vWSxH7EJjHQlnEswEvd95Py1eekHhgIhAJX8CsT5zWUst0A5Xwf+yaL6d6cfQaRmDpABc6o6Ypl1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdyRTCRA9TVsSAnZWagAAvIcP+gJ0jQFao4Zby+V4UxmI\n+WF4tukvGklxpZ/gmnGRFQuD09rQXSI8pOi3q+yBLe00ImZ71jPR5Au0GGdt\nvsgcXymblRauS/qEXoJII8u2/nWLewW67G5fCHp1FjebnYWhrDAf8NZRMmgi\nnczdGB5C+Ezrw2KRWxZZHc9i5iqDSw+0mxDfQw450lTGYXHJQUTakCFkPZU1\nnJ9UqZUATlucLEjEd5yKdDJF8ikbQK03Wan+mii7eQ6fnRII8VoxFZI0e9Px\ntXAE/FIbA0LonvAcr1ZhZRm2MRrBQsoA9hmCP3e2c2OLyqmj8lydwtOp8Q2b\nNd6eekB/rp2tAzqrwXlhwDqPEuDw6ko/uirZp0rPj3z5Mr/g8bvhclhlzcM2\nHhvbEj1cePCLvjBga+gAVnS+1ENeOVNznyarAkJb7EhDQ4XqPlh0N+3s8HIb\nLael2jgvK7UZgO9SclDfYH86UIWeUk5FGZY+1nfmK0LuEwrfEF7pSJMtLNAe\nfDR7OKdLzNn4p2ClJF1gw0R89OcingolckbR31dV1SE+PtX7VnhiQPppp2w9\nlmhxqeMEd9Qqj13TS6u9MAq/bWUwxirZnOcGHavgLjXqMOBBv1ZhO6kUFIN+\nj85BYUyku/cHDnDwn7ifkbI8SFXVQWhfQ2uAyM7f3/EKTFQg7vwDSYYN8Bkr\ncr+G\r\n=cy6V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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 floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.14.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0-0","@material/theme":"^1.0.0-0","@material/animation":"^1.0.0-0","@material/typography":"^1.0.0-0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_1.0.0-0_1551311955031_0.3780947662219256","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/floating-label","version":"1.0.0-1","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"c886d53e672c3d1ca6349d8cb1ceb4ecd5e96622","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-1.0.0-1.tgz","fileCount":29,"integrity":"sha512-VCaMiGJR4/pWw+du69lE0b6r43NPa1nLNoc2pLTUYaqMFpfwahhqFtLoNFWLttKFALPyB58hYd+WIB+pO+Fyww==","signatures":[{"sig":"MEQCIFoh7ThO+Q7m+02AD3eTd+eeLtK4P4iPPUjZry3rymMTAiBepJsTh4R6TUqL9lpxS2K8qSCIwqwAXKOnwV2izeTCJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317065,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbW1CRA9TVsSAnZWagAA41MP/2Fw2ps+u6g8qyqfjYgu\nOWUfMD0jpnAuHxo6Vx8Uad/rllGeRovahmQJ4CYWg70nwH7ZXRCepnp0bso8\nEe+CGCYAxZkVqKg4LrE8GUmOWNi9WT+D4GgidcL0VoRas1gjTiY2wjmYaWQe\nnkEDQxDW4DzFZ99WU+PI81d7/g3ZfEhXTxNSwBPCBLwfrGbsilkH9pkmSRAu\nP+BKOgjllxLX2mZqibxcTFBPUpCpu55/T1hxIs2cQO3FzD0CNZUxYrwqif2f\nkHY0Qv824swYE9CD1jSfo1+5OBnRs3CrI69eOgZzSpycLENzT1KKz6WZci+7\nPO57qopnVukkCDZQ/lf7F6l51xUIpjvs8Pj5Efj9EQYKa1mLaXddYq3KCQd5\nqh8USOOgQKY3pOPB2M/Zlch9cgLfstc12HXK7uQGZUKvKLMlHVtHT1xA2qlE\nsZcT/JR0bPxFwJX3LIpSDxgWIMhVoLw1PG5CPOPlTpZUeXy2d3no2RcCA8zn\nIT86OT2geFt+8vTjvDb0p0VV/mzavAwm9I2hKX4waGT0BWdXX72I5/wAJkl9\nNuhr+uPeWeFYqdZ8uT4y+n1uBjcVq5Rs69Lk8WwBfz8Wg9btQIOFKgETmMUl\nRdVqUM14fTBjbIu/fTH3W3He7NPMrZvZXMsVp7gMce9BdiYWB2WJLpjIMZpj\nym5A\r\n=rfUQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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 floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0-1","@material/theme":"^1.0.0-1","@material/animation":"^1.0.0-1","@material/typography":"^1.0.0-1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_1.0.0-1_1551742388954_0.4679406538523503","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material/floating-label","version":"1.0.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"9e30644abe2fe160af14f83f06dc8d15f395dc0e","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-1.0.0.tgz","fileCount":29,"integrity":"sha512-yESFi8HEUO0PmPWvaU3VW4X8+xaoFHhj2xGxLPu2hGye4ZBjTpmjOX6y1vwYqZLD5KWXj91k695UAT6J2wtWFQ==","signatures":[{"sig":"MEUCIFcSCPU7mZw7YS+e/ImNfA1LycFQ21SGhjOaDgWpGWCXAiEArfKCiT3420vNe5N3Opah+qNmStCflTnAeXNhCi2nono=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDaqCRA9TVsSAnZWagAA0SkP/1Wu20urRVqyU3Gml8tJ\nKaWwBp5u0e9VcfzYJbbo+cL0U7u1nJ6KrqAiak2UH4gG/q0K5ZlFtlEofPM3\nTOqwmL5GyZwPfustZP9ewVNO2I/Q6C/ne+RwK7z8bIh6PqD1ZGAYguc5yiYW\n93pvIe9KkdUVVYyRCaL41cVYYKBFpu6Z1J4D9WaLGij4AQIC/9duvRMKX4+C\nL53k/dWo+SW2IFouU5FNP2k7yTLprQIUKePIbZOuUqxBCnUhxueFUZ3JNFSD\n5vvZW24WhURlRpD1ZPQ1NL2RRFrrlRudO/AhmVYS856c5zc6iW2AiiwX9EBu\niwDtK/O8AqvrKdtyuNTUHTCfRO1OwnOyRfjEobwdOr0v4CtTPud9xkINW0/D\nPtcbl/H9JHRaBOj+LIL4RQG3nd0qDdK+V3jJrDHBk66TorX8opllHp3Nedzj\n6ap/CE2tzjCvC2VDR5xSBwz9u4J/x4NlJfcEfDc7zB1q0VSNKX1RKvxEjXqv\nRGYeLdGfwMkmlYbX1By3JvDBLkEzZbpagNuxEvOOYULaZejKgjL9FPcWQYO2\n3m6FQHNA92287m7FBGPT7kGzbmA0lOLRH65LgMqmgHuUh3iTpMKzy93tE5Qk\n3QO9y/SRn5SqVuI48/GAzJhdXMgFrhJrpsqZiD9i3cHUC6I02LtSKDxl7NW4\nQ70v\r\n=j391\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.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 floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.0.0","@material/animation":"^1.0.0","@material/typography":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_1.0.0_1551906474292_0.4974883761109661","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material/floating-label","version":"1.1.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"505b9f8c7628d0498a18b165c387d4c34840ca60","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-1.1.0.tgz","fileCount":29,"integrity":"sha512-7q7V+9o9XesgMnK11up9z+BcRFwtLIAIqVTCL3liKRARNHuzw9FGrGMKhTJUKvLZ3z0bM1+FmmVlA3q9FJWehQ==","signatures":[{"sig":"MEUCIQC9VOANLJ6H4rK7kvtGnyK/YR4Ojas6+DFZCA/x43useAIgWhrXm3uVTZj4ccTxsLPIZF4fM/2TtOYjR53LuZwW9lc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmny2CRA9TVsSAnZWagAAMLEQAKGoi5ZqyBSexTYyddUg\nTvEqEt+3or+ib4VZo8IJGx4mDRspFABzscwajdSoOHGVaVZrGB5xF8u5RrvS\npUKLGiBI8ngyGsG1wHi4Oc230B0RfIKRcgsKVk5IC8Fw60ooD9YZVnfcApGM\nJSoqVyqGMpAIPOnvlK7QPbDHzBBL3bhhDOYARsfeKmPWRQHtYtHfDQzdyDV2\neh8PyUlj2uGDorHNVPtrygFBrlJGezUFJ3dywkTrV/YXokpRqQDdtUfLmvia\nM+ZLXoi1s2Lv9FkGMfiYrkaed6yPUpdTGr+B1JpPfszOXVK3ckMbD1b/DRj8\ntOg8wyHT99IJY/LQaWL+tilieQrECPBKwMFoNoLwzIFDn65OdI8Zdhpw2tH5\nO+fwAXHPoEs6N7p9UO6bKZxQlRJ8L+PohQAdklGaW3RKQhpH/uylnjGuZNef\n2iC0tcu0WsukD92HzGpFwnR8iGYZQIc0E4mFu4RelWGHRk7GrVASSAk3lzWB\nQo2+zQuoQ9tbx4RF3/UulQ32S3ZcI8B9OwO6bKMXMg6xKoOkyf6HIW12qQAj\n6cdV+DlQ8GwPiwbuVrNbVw+pkb1Y9pxedRLC50Baatc0IGL82fuZ9XDnHFFD\nMzXWw5ebedVrbKQc8a9gBXb8WAgWiEDMORqF6uS1eECXEz1EEPlXr16G9hcq\nVjNC\r\n=NqFX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.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 floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/animation":"^1.0.0","@material/typography":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_1.1.0_1553628342186_0.32820166264605577","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@material/floating-label","version":"2.3.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"001aa73bc035b8bf913dabc2926361f8c1458f28","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-2.3.0.tgz","fileCount":29,"integrity":"sha512-OYcNmf+mVzW+rphDgVkyWES+SbivA6Y2+0amVDD9E9X6hLjO+L1dtIP3rC7lp0Y2Ey9rkuRORsUoriFvN7xQQw==","signatures":[{"sig":"MEUCIQCLzdOBv5fiT22ovZ2Tk5I/lDzp/ZK9KcblcMgpEdRxkQIgUP5xa1oSWMHzdNpe2qod/abw9piyPZKU6dFaycSKgsw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7abrCRA9TVsSAnZWagAAVqYP/2HCjTWF+3F/D8UOwaS0\nlZ9x37L1sgRYtwA9c5Nhji4O9cGs4ao165MvZWAEFpBgGHtcBUypgg3YKdpa\ntiETOR765VoOYI6Y+TASpjAKBu2a76NyhAiEpGuVFoE5dk9EkP1Wl7TGhW0B\nhciY1+voMqMqPm9FEmR1GPsz/42Lct/qYHdSIvFsFdt/cI5ZMHcqrDZg2H6f\nz7jDt90/r0oyOuXkWSJYNstUa7peGMA814YPn2byk1sxxE68wZe5FfOWx0v1\nlj9x3I+1TMoOWrI9pNJGfIVe3OKiHYVR6k/ICqJLf8EgqvY5HOR/G9Mv3jih\nmZJ1BHlcxccssMOgwpNeHvFyqZZIWWxbhLLK5OurYYTahULqH93Jm1Q2rhmt\n9QyJMsDN+40Da8mVei9xx3pIRkeWvEaAOOpScm1yyDmwZ9fHcFUplBrj88lx\nyhWmGPwtIiY5OKTzfl5268gXwxRuGuz34n8M/dJGb2qwr+9IEhX0Rt+bFq7/\nRjv4bQWy2/u82l7s8i+WsOJ8zJR5vPyfn+VLl18xp7iwRNnMtFSMcdhhe4HT\ny+gwRUDXlqah/EK7/UM7CHiIT4RPA97w1+Eq6Zh0M2YR7P7QQRltD2ZyZj1e\nHngSCnDqF4Kcdyot8p2354z+R/gKQ+a8muQA59/bn5mYdN1I5eNgqu4bgM/J\nWRAF\r\n=fgCD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.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 floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/animation":"^1.0.0","@material/typography":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_2.3.0_1559078633831_0.8838560292506932","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/floating-label","version":"3.0.0-alpha.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"b1c9b3fc7d90c8a35b0c3e199e44a1fea0050a69","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-3.0.0-alpha.0.tgz","fileCount":30,"integrity":"sha512-lX4K8TanzR9ZlDIkSCieQWR3zFEs3Mi100cYnZvi8nEYI2+NGGRm473avDGe+7BmvAbvGcZ+351C7ZPEy681YA==","signatures":[{"sig":"MEQCIHvwwGerkf+84hdIQ5sY8tyMnk/n9h+O8BN+61LHt2bNAiAp10V2TEPQ+Vv1KOwowITIXGztiQnb9TgwHBrFSIbilw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":232686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHpSCRA9TVsSAnZWagAAnnkP/jyYZrms3W1udvycfGgl\nJRMdJeFVJmRjk/NNTdFPgBnMSl2tBtOuI7/GQ3IiaSLddnLSEIHIVziVfvM9\nHfSsDNG67WkPq5kjnBNaKPN7hlDIfgnn63SsyP/BVOnZIb6IaD4EJgplo/p3\nVN6kF/kIOW4aL4tttfj/lPMMDsNckerr0RgGsWfJxNWO222Js+miAO01xiGv\n0yLM/STrpZ3gzuXYZ1vr7KPgZ3OYMvObqvXtMjST+c3TjuehgeQRBRzPD07p\n1nbAlos9C/4ZNwpPa/BQXkcylT1DMQAfPC6bROathTmPaxMW5BMCtFM1Rca8\nXDraXFuFStuExaAeid5owDvXlYTGuWX71+daXVKH0buLTAn+Ybo4bGomPpZ4\nvpCWYInJQb8TagVkuUVkfSoEYjZyR6GMuSm8IKsV2iyBaoXiCDob/M2eQWBB\n6bFwvOynYfVgSKsxQ2gaimPuhJ5eJGiK1sA4XkMwPu52UtJky48FOb9bGAXu\n9lUaFujsTOokFfXBGDppLgQCb9tPaToEXBEG7JVUT96rPMx9hdUOmSraPX2g\n6enNGxdijTAPVcXcKTJPWjiZkkzDSC0taKDwBpu7UVVg8kdQvvToHqBwObIX\nThJmExYVPmiOyRpNLyCzugFWW5lDvTmlrLBTGz+QZIwuu7x2gxWOJH2SRv9A\nst72\r\n=oHdQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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 floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^3.0.0-alpha.0","@material/animation":"^1.0.0","@material/typography":"^3.0.0-alpha.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_3.0.0-alpha.0_1560312400869_0.3083169689324199","host":"s3://npm-registry-packages"}},"3.0.0-alpha.1":{"name":"@material/floating-label","version":"3.0.0-alpha.1","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"799bd54c1afd97a959fce3a4d08667ec1d142795","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-3.0.0-alpha.1.tgz","fileCount":30,"integrity":"sha512-p1FPi1S5K6U4HCisCUsO5mHnjdODXOQ2pf/s4TTqL48hpZ9KbybgmO64nSM9SZdo1GTVc3iFcYYdZ/NMK9MInA==","signatures":[{"sig":"MEUCIARCKGsKgO+VQBD338yBnCY5Dp7/uL/ioXjJ2iS1ARrLAiEA0V/ht1Vw2avyjR1fWrjMmLg7fe2K8D32IrX7fa6SoDU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":232686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUwuCRA9TVsSAnZWagAAeRQP+gMZKkXbp5v2GBdyF2Og\n8NqcNak0plpXkAUcF/ztlOavOqbgRx2PQtqUQYzVdoMYKUvpTGaK0yScfVr7\nB3XMI9ILlxJLXi8xMW5kTV6ulnvYusdwaj2+qygDDFmjtmuRHYQv7pjhKxWJ\nCD+rd6VmMj4OLhDnHqdgfKeTV5KpIxKKtVpbE/NrR0Dt1AG+4PA//9ljx/cR\nMZBooCBUDU3HHrkd3f9NRVBwyJJ46a+oa9q3LS7t+qZIRUyK8SWA5zX4U8mB\nMTVlYCmpJ/ng8G+5zUv49gtJq6DIqT+l2yp0T8HKPfasDKkIFAGWzvjIvZp/\nwk6bgmInEqZL4tcZ5GXh/KFftZqFAKBIWthZ3fs6JiYhFG4RjV1ihgzUIQO6\nMA+uO5k/X7gLqOFX+KREO+MRtj7b3UQ5u+c3MDYo7HC+iUTPsdOeLENxIC02\nXG/0oWlA6pT2wXSQAnf7Lnvjx+OlNBGWXZblLmMlHEu5CzyNPpEWAwpj+dx9\nV8M4KQOoXgVzC9Ov6q8luNReF3SpuP0MOg/NlTTgzmsNyErxOUbvNK6GgJla\n6KcGPogvKDLCtDsebnJloU4MugD4i4zH5+YoMQf0Mu+0I6f+gkZHYu8EnTlP\nGcqWOhRB9iok7dZE762b/ET7CSBS3vQ3PKIYmvV3DlOHIAPHz2BXyoSNGwmh\nXXxK\r\n=TjB2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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 floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^3.0.0-alpha.1","@material/animation":"^1.0.0","@material/typography":"^3.0.0-alpha.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_3.0.0-alpha.1_1560366126062_0.2567668989944929","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@material/floating-label","version":"3.0.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"88bf8862e6eee603ba9f2db64851569130535d45","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-3.0.0.tgz","fileCount":31,"integrity":"sha512-k/JOjWLBR+xNGSTU5/W261PmtoCIlSZCs1QSfdg5bYbkEw5nsts+uSXGNQ0cmZ7XlmKja2VdUdEw7UaG9Sz66g==","signatures":[{"sig":"MEUCIQDM7AzWEUkFlEhUGynYxdgl5NSnK8G9wtk8tsz8yJxxHAIgHFrf6XaEz+gxYIInA7wk1mTHF6ALjUCqmF3Lq5Gz3Ec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233820,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/pCRA9TVsSAnZWagAAsD4QAIPPEoT59Di+PHZkAew6\neaUbH+Z3PtHjtEixVk2Lfju4GhhMkdzWWoE4dk+jx2GPWqWuQYzEX7YLiOQJ\n+2ASLOzU3gtkG/mSFm9p2+RhJkbfKMUixdkKLaBJA9BACeTYnW02b9zq5t/x\nO2RI4bhFYUTzLhlotPRFB/dR7sTprLmN0qYIGjuUS3CMC7wJ7XKH8UH7Lv3k\nReSWP9Sab8kbEddz2h5jj9h7Qyly9A9FHyKKR6ASNOaHKrYiVPkem8srIqur\nvRXzgkvaYEYKuoFXKJY6Lhe+xc7YS5U0n1uPeQzVj9HDEqdLD2juLc3E3Yzc\nhIKQFnn3nvMWXvnkb5lcF1R83BVEgNL1rNXdGlv0CamP9ciJPEgstMQ1ZbXw\nZTWhgzbtqp0+hOw5Ql5vQv81V/fk7s3o6Z+nT2JnAZMJIlvy6LlMqDkrokmc\niuBn4/1nLYt4SPua9KMIuPX0D5VzP59j/Mmw8lppue1sSet7E8n3QMJvX9gD\nPe0FtgkdG2CPrj9uLEhzRmFk5XT/xpyciQlFlo5CsQxN9gOIeys0PFyxwwTZ\nnHSc50saK2uwWr8XxqFMgtKXq68Gd+3IwW6SBU8f2uaG09PFhOqm5ABPU4w5\nGNd7TLnSzhQhz6QrPa+zcl7EJq3CarcA7oH/Al6qX0yO5+ZrukxD+WGmmXFW\nTqKY\r\n=x950\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.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 floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^3.0.0","@material/base":"^3.0.0","@material/theme":"^3.0.0","@material/animation":"^3.0.0","@material/typography":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_3.0.0_1561501672820_0.7021865914784466","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0":{"name":"@material/floating-label","version":"3.1.0-alpha.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"e83a314aacfcada434a1ff83d7617e763ede324b","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-3.1.0-alpha.0.tgz","fileCount":30,"integrity":"sha512-XPe2YQ18ZvuMxJ21yFtswjoS2s4TTFFX6MBG4r13lLzRWkjtokLUBUDyzx6VICJUw/KxPOC2Ylpg1UTICAhAhQ==","signatures":[{"sig":"MEUCIHd2qP/0lG7bnSNpuNoNu2VjO6uxUeDyHW6zc/6sI+PQAiEAkq6tV6pudldWi1y4/t1px75/OAGWy34Gd/20tfbR//g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdEcCRA9TVsSAnZWagAAmlEQAIn2ymgJBRwyZ3CUJNoP\nDN0MCQMJQlScyn02S2hK9JRmUkhMjftZux52gZD3jRZNuaEgiD2l35ZoX4cG\nYIJUtHLaD26RZ476omcZeHMfHoivUqhTAtcSO6dwV2uhKXHzpgvsOCoilc7P\nepBkbI1xZWjEE5F2HkLZQwfj+5kcAnV3rOwcwtoc4l69NfQiIF2lzusbURVv\nLg6CFY9hXVsQVPySHwYkUwkNsWD00dmyF4iKO7846yqx+9+NR81l8nMQmYWb\nuEQVzuhR03TqlOavQ2CsVsUiRadMqU4LizlEwXr8LbtZjkBVOz1vSWEhmqAK\n5vDh7Do5JPYTajqJD6kUgn3tB/G4Om6AkQgQOhIdHFrii+x0OPwia5lBy8Ur\njBbR8RMpJ8dPvPxGpGjoaiaQSSTpip94gsZ1gyC6fDjk1fIUuf60hKdEB0jL\nExrNpL8wwGC9wqMEcy7IS6oq64wmY45dJO1XOdbwIBC03j9lgFGUcwGFCuKZ\nDSYS2gVJCbawWgkbWmtwbaSYKfjD03lcHlMKwyy19fPaXpyWkjKfHwzQpkxg\nbkf6D9yUabLdGWP0EDJZvRPQl92RFKTwRsUZGlBX9Pk2MI20q3Z4AB9f/Bn+\n08lpKDs/3DoMZwCuceFvaa1T8u+WeIiGLV82ajzFiZnzAbtjXlEriKQ+E9N+\nF1Gm\r\n=F1Cq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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 floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^3.0.0","@material/base":"^3.0.0","@material/theme":"^3.1.0-alpha.0","@material/animation":"^3.0.0","@material/typography":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_3.1.0-alpha.0_1563283739938_0.5728794713736127","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/floating-label","version":"3.1.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"8be3630b835d0368271b0e1bd02bd7cbf422e560","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-3.1.0.tgz","fileCount":30,"integrity":"sha512-dzV/h7EjEMQmiDOdL0h7kETRRrqFC+e8M5KDxnJZ3j/Gbp6JzvXrpvZwwf/DkBK6Sl6xcScmAyGKMjXRXS1O1Q==","signatures":[{"sig":"MEYCIQDyuu28WUqqOLq6S/NoAm5b/k8OEth70py35fLznChxRwIhALyV/46LO3CigFUI8RjKkNakJgeJjzCQohgTMSsyQJVR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjJ9CRA9TVsSAnZWagAATLwP/iAPUT+8JhB5zgxIabgA\naCxCl9SbHeBnCl3Xnnjh9hLoD40SDJZK9T79CvmR91AQ75YQtOxPvj/HhQDJ\nn4QYlXG9jVF+Wq8t60QuckX655A4j23dx0MGkVALUNDkcD3o5Xmoi1Trryg/\n5zB8KsVje2dv32I66mgWb/gNPeLwSdDsy9ppAy0N7EmutOSXZASS70i/YLc+\nauJkO8DG+gXnQbdRH7Gwn6o4VTOxPAKdIvbnWMGQW2m7qvbPVyH7nUnVl3S4\nm7fkguxWjwZAMh6rBNjRzQRul+XfqzcNd3UnEVrQNel71TQllaHUHbQJfVwR\nYEmjxq1KJiU4QAE8S+5MTxIRKvTZ96hnOINPBXymzPVBFCO6sI0WDpzL8YcN\nKejj045AHrL3R5pqSRAJK3loPze2tOrokjILqF/qgAFCdqom3Llf2DSkfLmR\nrk2PyfS3f2RXWbVL0t5nMBSYoC2JYUjqeCJD3iRo1mXkW8zSSDKDT0UIrUY8\n2fG3s2SVlxVBaTEEntkfRJpMSgd5NmTThkl+eCUkqdPiHGDJZx1XWPfyjbxa\n1F3GCKalpe/7tOluKayUH9lsyyQLV2lKFnwhGeLawXiIp8f5CneuTsk3DNms\nI26hIKtY3cvU5o5rnwSehw4i5gJIq/hYFP+lwDhV15qeZD41EgsC6x1aWg+G\nB2H/\r\n=rzbm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^3.1.0","@material/base":"^3.1.0","@material/theme":"^3.1.0","@material/animation":"^3.1.0","@material/typography":"^3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_3.1.0_1563832956386_0.31072258020925836","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/floating-label","version":"4.0.0-alpha.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"2f7a9967b45b5b235aa4a0c7db2d4ba54652b88d","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-alpha.0.tgz","fileCount":30,"integrity":"sha512-xUo1PQcXwopfhrjDPzzHPvHcKVGqWOD+S6WwQ1FVFStCb+SClYM1gLPVQUF9pWiO7D2lV+zkULTGSWbe2SkQBQ==","signatures":[{"sig":"MEQCIE7jqTUy+uV22831VDgp5uYG1a/mISAr8zC4ls+V/w/kAiBsmM4S0qUzlDtMFIckfSevuDcWceDCoYd553CgkYIRcQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz4GCRA9TVsSAnZWagAAacMP/08Zna22uPEna0+roiLD\ns/u2CnZLHYdosQ5b2EdUT7EXCVjeWG/EOvc3OqPQc1mZapUSF8RbrNtKKysf\ngLvg5xXJLwlM5aH3ukgnAOF6v48lQ5tA/e6xahx0TUBgr6nvkApcPZyy0Jti\nz8juoZIxvNUJJFXInHmLws07TFQ0DaIwHNkaPr2ljM52pdjG82D7NNus0UEJ\nnqnQ5LCvrU/o4rA4QG5eF2R4F1YE0STkyjHMwUP/LxkUtMvVqWo5FgHWrOLU\nNm+2wssOVspEW+IjBbklhqUQoOBPfjhO/fLT+Y9gRLH4rn09B6714uPt5CxY\n4SiF+vJlYNPgYQtobTdwsciVAIqBsKlE3nsK59KF2ZPNxHm5dsDMItQU5DSs\nkOTEYrXJHh4KmTBTe9DIa5SFEg0qzG0dpSQOEq1dw/D3hI5BZyrVjPQXdxB7\nqmsdQqUbfM7WMfZtZYs01cgU6ge0Y8AUKVb4Ac5Zg0twNvZoqV9i0utBUwkb\nPbAXF7JzeqJIHyf3ngGwsBZIhljPqgMH2E11UHKC/T2+5ZoE3BSFkxV7EPf9\ntbiabcKqpQBJjjciZtXiNFcO/nAfZ0h0sLW4h8RLi5w7aj32onrkCDOjUehi\nV1OQbPBrct9+QTVzS8gAkAHnJx4am0IQ5la5OO7pniTwtUO+A/rapnzTNxVu\nG/JI\r\n=9SRL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-alpha.0","@material/base":"^4.0.0-alpha.0","@material/theme":"^4.0.0-alpha.0","@material/animation":"^4.0.0-alpha.0","@material/typography":"^4.0.0-alpha.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-alpha.0_1565212165697_0.4327325585413029","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/floating-label","version":"4.0.0-canary.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"45a25b34b63f742255494a6863d42323048334db","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-canary.0.tgz","fileCount":30,"integrity":"sha512-LZiU7bhyfFrs0jKSbwagI/ktkFjSLU8EkJAtTcaEzGyBPr9Od0v0NWnwdrclGzYAcdvvm0wWOYv1eUpV4FTA2A==","signatures":[{"sig":"MEQCIFKEqoI/4fpahIBo+zFvdHSbCaOM8zy0BkKIgow9DAeWAiAB4z44xxJennwiqbMtCZp+5LtZ0fd8SCIBSpt3vtivuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJEcCRA9TVsSAnZWagAA+0UP/2miYHDee0JUFoGosYBU\nrcohzqXIUAnNtt/8J+LpVj4icAEnv6NpC2Z2pxYWTkNtvV8vftOkGnmnuXHi\nj60RcUZNTWYahN5bqpGrUieAL040Ar7TsL/yLZL20CrQlvUk96MTpcPAgP3L\nB44+CdgL7edviwMuzQJ4bcVLH08qa9OuDOMsNvdcRRG2XpZtum9TsMHkjf8O\no7FIXuc0nRWe1ERITkny/EFn2D5cbqbJ+LAMvmbVyPqf5FEwRgwQKZVBDSlK\n30Hp3gev6DKmeJzBGTME1ttLNtxjKl5qW60aTCxyzsRBLirF1fiOgOJaIKEr\nPBzI8Fn9d6jVV6/L2GUSqy0vTbcXLFsCwvd31yztUx59rPwnt31qLZiDJbwX\ntRJzTu/Yzq3vSMukoPRrybXEtwfyniti/jkyUOmAfO/esy9I+6ddXtjVYwCY\n8nr7r9sGPiMiDtJ9Aqm13LJe0cscZxkjeQZsHJDywalljUGeWOVydqnTZ7Di\nAnWuJOK2yxxyQBYfD+koOgcz5w3VAWsOmTSAIGt99VqGDaLa9pBAyf8ULV4S\nSA8wndMKyE5jGEDxE7TYWuRuwEOPu7W7kA9ylrNesoqQHL7DUVf87rYCA0Mc\nLPxKVJE5YuD+O0d6rjl3fWCzcoTfIq7vbNf0uYpZFX1azIy4TKeYdg9bD005\ngXmt\r\n=HKcZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.0","@material/base":"^4.0.0-canary.0","@material/theme":"^4.0.0-canary.0","@material/animation":"^4.0.0-canary.0","@material/typography":"^4.0.0-canary.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-canary.0_1567658268292_0.08027228383101814","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/floating-label","version":"4.0.0-canary.1","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"085b181048c02c3c3855dc7103ac006aa1c7d7c9","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-canary.1.tgz","fileCount":30,"integrity":"sha512-U2NJBDpBUML+eE1rfZz/TfgQrkLZe9PBLwxUVGJb0AL8s98bSUNAfnhtAhxUSJlKa8foUA/GCCTpU+0/DnqOvg==","signatures":[{"sig":"MEQCIEefyGmPSfymNMgPLpWQZnp1C6+tzhJkgqsG3qfHinZyAiAqNB9N5IzRBKmnIyiu1Ri4R5w5NOgSSyMbteF8aeWtQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQaCRA9TVsSAnZWagAAE2IP/R/xxQ6aQ09abi3Q8pyF\npqgmrDbzvvRPGyTKM8/hS4bGnuCSCuU6STIMXv0VEf2nTCTFsC4yaIDoECt7\nhgtdxtdeJ/U8wXX3x8el1uFhekK4szpKJzNvCBtRDoTmtQfOrXUvNamVBEU3\ncYcC3LG9jGdwP8nDV4TSjWFS/xidALXIM0O02Oho/hPx688PZtx2K4z34ObG\nFRh1xlON6oZTUcEKmmAFUWFzLBh65uL7gKq9uPWUTfOcGNJiLZice25vpaHu\nH0QkyEpKkvMV6c6GdfiXUdftG7NtJ1wnUx25qiunB6smfqmrf+UBGAFEfwZe\nQh/uOoQSjbenITDM3v3fgJsoHyc6dAj/68qImAIHhyXruBqh4E9a5dFgW7tH\nQTD56gFlFm2kg80yLSGZgvu+ahIsoUAzTvU/xAK44muX0UuG5MM3jg5uVKEH\nx5ilNjZ+VY0/25e92Ul0rxUadGOiZrckUOuj0wMw17wKzWd0CD6CQsPnZpWc\nyLJEMvf5MJGep7EUE25TswBnTemhRTxDD/tA70UKibsu5TaF4dhMqHxryp5w\nYNukGv0QZhtEIayGj+1W04tLxAa7tpMYQ0u1FIh+YwcDm1d6JCC3QZ7qPKPL\nouIAZ/M6Jl+LaBTAsDefbRJ9xsQn0DP0jBd+PKWRD+l6xn5bMU/Ler5/t2cI\nS2hX\r\n=0Vjm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.1","@material/base":"^4.0.0-canary.1","@material/theme":"^4.0.0-canary.1","@material/animation":"^4.0.0-canary.1","@material/typography":"^4.0.0-canary.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-canary.1_1568060442223_0.6061877136199458","host":"s3://npm-registry-packages"}},"3.2.0":{"name":"@material/floating-label","version":"3.2.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@3.2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6de47528d1534b7d87f42286ed952fe63153c4d9","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-3.2.0.tgz","fileCount":30,"integrity":"sha512-szzsSou+xXj3E6InEuOCr8E28IE5EdcBfKRaHoR5EBkzgcRxLuZkFSqD19zsUgVErdTCcRSbeU9mYa6cP8+Nzw==","signatures":[{"sig":"MEUCIH/JdzxcOwVG9MPXQVwCYLbj9d5cS4xlrBtbKCMFXSQqAiEAtgHV4suF5N9wpmrUjchZjXSjGI9Oj5qjVuYHqffsMPo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJder5jCRA9TVsSAnZWagAA58EP/1oj0wW8zwFLEGCqGHPn\nfeog8ljCt71gxxLzfN/sZJNZW6xoB6Y5Sa8A6lxMDpMJclEopxSy3yso9X3/\nQJ/VL2+9FNTS1UK5DebB+o+mQrj5Fbm/U8trxZ2MO42xB+TRzDM4e+YbNRbd\nEMlJnDldZXUeN2cRfH9Jr8pPGeqHrWbe1/H2oEF5gBzwwTso3CuGDH6n7nTw\nB8hCbFeBx1LsrN10jI+zAuE3yzbJw2cP0cu+WSA/wTKqtGljMu5U1/iCAdo+\nbAT0cdDMjAaK0inHs5i/izKhcKvJJJZKthmCqhU8VJRnZaRlRhssB2xGxLrI\nVOU+OX+YknR5ZvZn78+EhRvAgML65YLAYMr0W4xtfcUgQNm2YKn8wso2RStG\nGusBryoPVE9COXVpAZRcdQbQLGWo+6IVtSN4441/SsZihFK7FBRIkceDeM9e\nZyBGCswRe5a5V0c5kOXS3vKQWYBqclyIdH3Bpb/3Eaere6paYvSPXa33L+An\ncmO8/t1xnuzKtrabqfNRpeWbdncupajbS47MHIHGbLmy0d8gWUDP4VPheM5U\n8fVC0pWD1+kGmmK/1GUCiaBu1WOq1VdQBt35NmLr3BGUAJowVeo1Ur/DUx7H\nNUupg+NSvA0xy4rtDHirTGGAlt6188z7ghyEdnl+yiXQvI+IR4s8shINgYKx\nWZeb\r\n=/tDa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","gitHead":"abf67305fa705591abea3972006a18ab5fac7f63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-floating-label"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^3.2.0","@material/base":"^3.1.0","@material/theme":"^3.1.0","@material/animation":"^3.1.0","@material/typography":"^3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_3.2.0_1568325218521_0.6799918034829322","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/floating-label","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"45fa845dd2b3182d8867280be15ccfd30bd11508","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-canary.79d881baf.0.tgz","fileCount":30,"integrity":"sha512-5y2kG1UFQ/JnAL3xQusJG/WeOI1Kj9D37vYjsufQMrqytTYyVHRurwqZGGzkmqkB8ALtysN95ICrTLp/bDb8sg==","signatures":[{"sig":"MEUCIQCz0508sV4OWyStK2AB+RDMiLbJ1+EFKXN1G3xyTGqOKwIgQzn+EkZywX84CW4V01+IS6bDJEaqc96/IgR1HPVifg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164899,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev0sCRA9TVsSAnZWagAAqzkQAKMS/nFX9P0BHktlraT3\neBfvHUkG5qgpKM/bgtMxTBo26WBZzqjuMQGnscTwQG/dDGmfzX7g0n2yrDku\nGvqXhvCVluUoXwDBeY38IDALScmWma+/PNpviZS0OkmxTE6OAWzh3bhJxoTY\nkG76zs+jH9Rn3G6sulDNveoWeIx42iKgABoJ8W6GY48bI1vJGV+MeDsl11TF\nEBo2It6IWQPIBYVBmjAGjx8pf8GtTAHiwRRbTRXGQz4UjxpnyBCTU04NS354\nrHq6D7z0ykv2D3yEaIy1pu9QrseUYjBY+D6S5HdWbJlDhlDJJ8IrKI//lZqO\n0kTNP4u7z+UfY4DbBwv3nuGlTaZk2ABKy2p6Q0JkkWGssqeUxRPjplT5lv3P\nyZf39JVzO4njfQVv8utzurX1Rms5aOs5L6BQ7nJjKb9ClZ6dKV3x+dKAA+8T\n0XSZi+57/p0sBcH9n9gmErDomdP3M/jMagrw4Oupr5UX3A0Sf3ehsY+XjL72\nGsMi5lUmBcrfd3f4yEKijzljIFWM/+nvZI0AfvqNj6yLKHhPRi4KAiUl2Bsn\n4TQ3Dh0PDzvll2VPrn6f6ApyUB9H29aVLYFzMytNAVTlfHZqAoXr5HAJXEDz\nEZO01sGf+PbO0E4epJU0NuQC3zFw+2WE2hE+aKs1xnq3BYUeOgUoO3/hY910\nIgbQ\r\n=j49x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.79d881baf.0","@material/base":"^4.0.0-canary.79d881baf.0","@material/theme":"^4.0.0-canary.79d881baf.0","@material/animation":"^4.0.0-canary.79d881baf.0","@material/typography":"^4.0.0-canary.79d881baf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-canary.79d881baf.0_1568341291604_0.3688285749386899","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/floating-label","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"d6cd180da5f32c250c907634b0e4851bdf2e69a4","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-canary.e851d4f40.0.tgz","fileCount":30,"integrity":"sha512-ZIarmGfmrLqW08Y9TbB9kM+OVv2drd9Ij5L5lCvYGDQbfBcHPT/HM0kWIGl+srX6OZOuBFO63PtAqvGewIM7XA==","signatures":[{"sig":"MEUCIQDM3w0lDB7Zl8SnpMSeUIkQfYv9GUVVQlpaRo/RwLFMrgIgDlZiIIg/R6yxSyTYxGy7cVo2VWdZAd9BMgH5bLJfn74=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexX3CRA9TVsSAnZWagAAG/8P/0A5sdG1otjq0Hl7eV/v\nuolh50QudwUz7Iw70p1KhnnDC3HQB+bTzYt9+xC5+9qI/OMKx1G5NW7g2uEe\nS5ta2Lwyhgcc/9kPREUEKnINsbcIiUZQeEW4Sc4QZ987YA6WON6uhdICNGxc\natAz4K1JMPbgCNmqItENihx4fapbScVpJx3RSnirdoWrkIBhvwPTxfRGGN3t\nKv8kmAQWY2b4OHY0TwG5aT5hb4EWXZrNr5Prhl2dQl5r+s7kUYD5yEFlUh/Q\nJlI6bMJsi6XuM7OLjwy/m+Z1DXGRcJPPOw781oCb7mwBm0x8GM6sfJ6TjwSC\nYXtW7YM9jiVdFAIMKas13H/BVowWo2MspIFTzqvwn69NqAYJdfW0o22mENSC\nb2KSM8GXeWmiVHpw8g3bFLfkJ1igWDfXfoq3GaY6CvW9foyCTIDnNCOYGFq/\nfwbqHDWV2iJpq2pdIyczpeFiJl1VDsP1n2JAUSlesAcNyhyqVG5QUMOJIN77\ntTRRMnP+HPZZjlM75YCQ1QBdwCNqAJP/aJ/juod91dUXh85a6O9jFcm9Dqps\nlm+cF62vfE3J90Q/DwfHwvho/463Ikw1i67Q0aKRp2ECUrR8g0uiOXEH6iz9\nEYxHcUIx3Xl0UxrwSKnQNP/4AwzaBf7gVUGughZnXGkXjror5Dks4WdRS1Lb\nASHt\r\n=PmL5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.e851d4f40.0","@material/base":"^4.0.0-canary.e851d4f40.0","@material/theme":"^4.0.0-canary.e851d4f40.0","@material/animation":"^4.0.0-canary.e851d4f40.0","@material/typography":"^4.0.0-canary.e851d4f40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-canary.e851d4f40.0_1568347638909_0.23378720457418822","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/floating-label","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"7ee696dd280df7e58faa718df71e720c113a1004","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-canary.905884690.0.tgz","fileCount":30,"integrity":"sha512-LtNWtsXNBW22XeF/wxLJvaOpRLITMqYVk9DmDE7YABVsMRqoMW8M4J6ze11q8rxWa+Sk28xypTHeDtqTDXsOOw==","signatures":[{"sig":"MEUCIQD9y+48bO3rnRN02uFO1/OIy6XuIlC5TnypZ10ehWsxUAIgNWgyiy+42VTRcsGM2OCzhZxIMIOPnY4E/x46yU+eBa0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB85CRA9TVsSAnZWagAAmDkP/j+4vUSTqOgxyTZ22d52\nCvRhaz85uzVsVujq2cllMBnGPytEEK0/HrZM/dsqzZT3VI9d2SthI6B61/tR\nNemjQA5qWnNBmxy29QglyXtXVT7a9bHkAgmMmDKfte1Vem9GeRxJrHRS5N51\nSlT215tYCTI69j1g/AouFJIeXrQn2xIuwWq++6U1ejbxZXarmRECtI1jAio2\nF/TwJhtTkePi/BR+SAd+jrexw1lqT1dtiT04YLmaMGaTC2fg6NQWNUi7q9FD\nI+7Gn0fg9t5o18hsotmu63AeqZ8BWWOYiloq2NwNoUCdmj92m0mZHxluba0q\nEoJjKAamER1oUAWfRvdlYAHOkrMt82KyxbQQrXKsXBBn21IbQxhQaiTfT939\n77+dwdYhDwNOuTtM0KJAccfGVR5loKSYsSv/IonWIeG637bZ9nWtUjWCdO3F\n0QWhAKzQvCsNqt/oMCN77wp6ce1M5d2tdy1tmSp3UGiEh2/Fc223trj1mOAI\nVbukqSWxOYabuOl/WoFwjpCqHX3tKz4a5++e7NY+AGwmAk/MAWc2d/v2wHBF\neuB1mQb87ZZxLr+HCBEIJyhKE713oo1Hhe3x2cvSVqteGkf8JSrhzEyNuuqP\nD6CsGkCZMkp96bB1XqQKujGb3klc7qxCVehwZP/5ZfVdcY+t/WnvEY7Ckjbz\n2ABw\r\n=KZO0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.905884690.0","@material/base":"^4.0.0-canary.905884690.0","@material/theme":"^4.0.0-canary.905884690.0","@material/animation":"^4.0.0-canary.905884690.0","@material/typography":"^4.0.0-canary.905884690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-canary.905884690.0_1568677688528_0.4750642597372787","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/floating-label","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"a06817c6fa55ec53bc4da890986b9cb09f3bf850","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-canary.199534d61.0.tgz","fileCount":30,"integrity":"sha512-LzPLW3IJ62RrRg0LVaYC8BuNbHMORC/u4Yu33oLbI8b4/8LE5vuDbPsbvd78EwJA27qADI36B0NbiOMvla/WUQ==","signatures":[{"sig":"MEQCIFHqBsCN2eS7AyYdUhs6oA8LxE8ulbZ8M59yCykV9N1IAiBDSU34P2PSJqGamJ1z3N+5QSq+fJtWMaZWNsiMEYP7Zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjlumCRA9TVsSAnZWagAA1TUQAImTEJ0zqt7N4xGBlHGe\n84PU0qsE0raIMd2yciP0IFdgaHr/LjKkkhTXGQgiu1v26dDkT+An3fR2q3S4\nJgSDbs84Ypj30u/CsEMiAFucQ2RFCPDZQ5iYk/QWxplFgokuky7VVOO0S6Pu\nEr80sd2HpN+SUj+qrHTPyVS8MCGln+4N9FD9exHXU/gzVci4L9goIAnFxTIl\n9WS79h3nk345vfcCe0O2hO/BlhLJTpfUIjz8ZEzSXskaYbDyME9apuaN6a9K\nhDT++OAlklOwba0/rvSL+wsqZ404F32uaLzpwN2lqmCCG2zu53BhJBrZ8kjK\n8hqoC33xClao+0cdT8uJPTMyQQ18DXIqEw+296MuSfaOBVYfX0nX4ZFJdnM7\nvUKs/dj+8zq4kwbg4OnRYxevZ9Sg6vM0rHezdb1v3zm0A5nmYBxgZNA3xfvr\niCr8iKig3P1hWt5tHjmrm1lIG5nl6NLy2a8bDalsK5R4GQQW38KbPjHCIqqC\nH2nkSNi7N7hIfLwmqEZ2nKHaMm9+agWIkIeB8p5otNIELTfbLBV+jng7FKBQ\n/ER1z6ZAstIGVJqO2Q7ESIRnz34qX4Uorwq9CxwEQft456IOqwTyBBXQiuDC\n0V8rnNfesOMnmu1ajKHL56/FLizxiR9CZdKT5K9Tik/kXwt6UKqijAyKYXI6\n7fOD\r\n=P3hN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.199534d61.0","@material/base":"^4.0.0-canary.199534d61.0","@material/theme":"^4.0.0-canary.199534d61.0","@material/animation":"^4.0.0-canary.199534d61.0","@material/typography":"^4.0.0-canary.199534d61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-canary.199534d61.0_1569610661711_0.3528337308355609","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/floating-label","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"05d3c58465064d138396031b79f5ea9e7e769e57","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":30,"integrity":"sha512-+I2GkmTGwbW234QMRrmxrTJqA3HU+JOTg3XiqBN1TcGd26dkyNhgl7o86q3fme6PfdQ1pI+rH2HkdkMA7s8Bvg==","signatures":[{"sig":"MEUCIAk81uDKCzvqjhPoDvcaQYBxHpHyTDdROyCgwbqOu7WuAiEA5P1lDpVXYnl/2XCEzQo1OUbtAEHGzWKHzIKZLr5aKrc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphaICRA9TVsSAnZWagAALgEP/0OS/yaWYS6BtsThkOKk\n7KGcYQtDCuaHysF95Gw5i56f7rWfru2UcTweByelTVQP/6YPNOND7O7okD6S\npWSl+eU4LAKTFpzpi74rfe8SIx9ilIv1gTlwcODEEBkn/QccY+Nfgyc4KKqm\nKJAgooplrY7eZGksZcw8/CGJ6iqqBlI2CZpTWgh973llO+aXo334qKWkN1jF\njflPF5Ay5BFLJYlBL11mkn3WtnztEbPSDpjKX1U594lG6EkDOCCHCfU/+wYs\n5lvs/D4wr9kQyf+XQauTaSPQHGbS0USI+2bTj7F+Crlnmy3UeIjmLfgWjmY4\nR46YpMe/8l6Kze5jYHCrfSHPk6YAn5B/85bzw0dqVz4KDMeNkYsFfEdnVPCd\nYVFRfkCN1K+QuSk4sltNBLdutRtKi2i80S02x8l4Z3ANWC5uSj0nZNWaEL33\nKVI1au25RyMvRDlgcHpV6mGNudjWCGNdCsvTHJiuz5vLtiV43KJoaALg49n9\nF20a4/MItk9yfLWNk/Jw6kl1OQI/RIs2hFFs7ZGfJoLPhonNILzOHmw5hl3q\noUj5b+pWJHmQuIdGqxXrlvYaefSBw9rSiwEmYZpg1WHh+anxmPa8m4AgEH6c\nG4pbD1yNQYJZQH5z/D+ZsAIKuVoRnNg/kNGVHdsDanz7SgW2WyEeoDRBhOb4\n4C/X\r\n=62iR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.22d7ad2fb.0","@material/base":"^4.0.0-canary.22d7ad2fb.0","@material/theme":"^4.0.0-canary.22d7ad2fb.0","@material/animation":"^4.0.0-canary.22d7ad2fb.0","@material/typography":"^4.0.0-canary.22d7ad2fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-canary.22d7ad2fb.0_1571165831844_0.5778416437420233","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/floating-label","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"e7e88a8e352311012ffce8d098109a84aead1dd2","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-canary.735147131.0.tgz","fileCount":30,"integrity":"sha512-JW7Wqd6tbgjh3bGkCYtOzDhMGjzsJVPtF2cOQBLigj/fR21h/ufFFcXKUd1MULIaVTSKOUocih3PCwBFNVh1kQ==","signatures":[{"sig":"MEUCIQD7VXXJHJYK+zdpc/HYbxIfKLA6dpyyrjBTr6KAR0jDbAIgbWtae0f6GFaPWtN7NOhSNvlc9GrWexSmXipYkMxpM8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnEWCRA9TVsSAnZWagAAugoP/2913oRJ9j065snWnigO\nAORjy1Ey9i7SvWCbFYAijona3ONhcMbsO5GCIBmbDXGyndwfItwdV9FzlQfi\nPg1FMr6kM255+tcNC6KkVlL1QqeyZXeyzYDAbth3j0KgLWf3mdgwxO8dLB0R\no8l+lioOStmYvCp0JBZHK4BMIBJbY7q19w/6VLtBuCURXiWHbsTMxpCe7ziN\nqecxJIcDyTUJfBuDx41XelO1TpqMcW6zwWtejt2kP2liIMEaSDrMZ2mB8hLe\noqAdbWVFM2cguI4s5YeYysR35xKZGTdajOOikyOfBrgJTGQ9rMs6Tr4yW+wk\nWmV9lISgr3KFxhrgJ0O83RAoEiMeFgI8fia2f9CcNr9WJsl1UHEpsQM5emjF\nwVg911bKdmbPnvMaO1ZQ6LukxXI+YOV6vWERgZfLZFbJr4JnNTYqPTT7gFIN\nQ1EgDbY0MP0ipQXtIjkkwe+2+ih98cxOxpCEjqDdSj/CLz1c/UeJVo5O1rgu\nBx2FELN2MlMcm4kHJLR/11Eg51YV+KN2YntYTB+JtizH7ILuqV4GTPnzH98N\nVOldqOCGlRVNG+/CgdCwNdGz4pV2wo4hjWewz5Vp2Z6EZNt6LBUzMiOKBQ4O\nZ0yvTQtcn4ZdGI4+KBUGe2CHZqHFnPRlBzrqwZspqA11jb6IsDYg681S67n1\n+Pda\r\n=KCjs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.735147131.0","@material/base":"4.0.0-canary.735147131.0","@material/theme":"4.0.0-canary.735147131.0","@material/animation":"4.0.0-canary.735147131.0","@material/typography":"4.0.0-canary.735147131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-canary.735147131.0_1571189013657_0.48023256723573926","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/floating-label","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"7503541ce3c91d35f3b01c728c44b83bd124c498","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-canary.062ade5c0.0.tgz","fileCount":30,"integrity":"sha512-Uk2+KGBzZ0eK6IiTQCo02vf3dlaRbIhPgXY7A8+85Uv3x4orI0foy2PMwvgu5UXlgIBMTizjxNzQa8qpEWo/Kw==","signatures":[{"sig":"MEQCIA5rFLLyHEN/c0phMSzg/qT78fticSJclC0At9foOFnFAiB+rZvQIfM+7tmMCbH656QdYROMJoidH8rbe6Sv/gWaMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp71tCRA9TVsSAnZWagAAy1EP/RGHxbC96Ht4m/Wn+vXl\nWeHQs5fKuFbtaCgf5cKo7U2xdB9OmMK+uWTsY7Fmp8HFUJ1U32IfMaQUmvjc\nWgQsr+j+mTg4+TKk1RL/lTitPRuVwBgnZxkCVkK/6+AVLp9l5W/DSUneWZUB\njprdT6My8EYWgczjiTqArhvjnhn1GJosjENuF/Ewr2SCgbRW+KxbnIR1+55+\nyf/DfFgVLDHE5UPfISRuOg+gUasR8CtiMAp6+JwqZqV3F+2zOko04XCydWjy\n1Py4scdp1K+18Ihv1LW/syg4ghxhBElScn+AWvozAv+u8VE1hcOJZofCeXbz\n296cg0eq5JrTGONl6XQ0xaVa4Uq4hvL+BojHlz+Tdh7wQv7XIzkpMQFD6z01\nZ6MGBRKGyCx1FD5Ai+Na/UzkL4+lhxOgWuaXf82PGLeAu7N8+YYz395v0BJH\nPODckDcU/zFMxaTtZsTWCd2rKtuZKpiE2L++xh+oieGQ00fH7ss/z3Z26YU/\n/xPjN9NB2CWLTDOpSgZlnoS/eoQNv6AJYtyI4XAbyoA3QNkhX4gcs+lrroMC\nbh7NxWTbIncFTCemY66HPlE481klaiTGk5dY1uC+R+0S7jMmvSKTWD6Nrzc5\nvFz3lvEiEEXl1vHYCV9d5wR/rRV6x+Ab/8nBPpa6WNb3kMfrL+J/vexA9TUq\nuWhc\r\n=Y0zK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.062ade5c0.0","@material/base":"4.0.0-canary.062ade5c0.0","@material/theme":"4.0.0-canary.062ade5c0.0","@material/animation":"4.0.0-canary.062ade5c0.0","@material/typography":"4.0.0-canary.062ade5c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-canary.062ade5c0.0_1571274092395_0.7375007775402993","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/floating-label","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"7cced82a0ff9803b7a1bcc249a6c786dd81d792c","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-canary.774ad4f8.0.tgz","fileCount":30,"integrity":"sha512-ur18gW/NFS+bcU+804mwHNEcObtrDGOmHk3WWTe0Pf93/qOBmab5G9D0oiSRwegz4qjcfDAXzojyZq+GZsZ/cg==","signatures":[{"sig":"MEQCIBqlWVZ1WtPSb7bPlV4Ib2Q4Oo3tStv6Z5UpgN3u7ZyRAiBSbSuEO8lnsduyhz9wjxkGyrpwjXJJ1jDGnf8Zf42oPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+hOCRA9TVsSAnZWagAAWSwP/1oqlVWXykZsAXj0nvM/\nSk3U/tu9dhOQzJpDIkMs2Zw2Gzq42/Izf5T38zirDULeuP6ohj0N7JBN9nF6\ndxUcKzAfTLK4mFNzpZq0NV4r/H8izL4r901bD/Hn3z5jblwE+htPphfyJvZ3\n2pUlEjSrGpYlK2MdOCK6eaRAXj3+xJi3Wy8L7qkQRPCPQosE8WgDaoAc4LJ4\nYGItQCtay38m9tkFlveHFXXlPTobYsB//R/RHxoayih5eShgQs1ANRnaEeUJ\ndJcFHCIUK5zTOBSaZoUbmxHzAJfDKdIAHXSEYyVKNxPUBOF1gNP53vDz1UBP\nwfD1uDSFCVLyUCVV8O1jOe8KQamX026Z7MmTAokH2t6GWuPRNa64fEK5loAJ\n769dllNqTS4HezcEOkHKgQhgFqG8hxRsy5oUXhitMFrmMhWAhuOmA1ZF6nHC\nxXlK57cWvh6cycOVvyaCfamSU3bCAEf46zCMYK0WzC06p7IMjErwtL9hvE+O\niuAYcZ0qghUamRgnMk7CPR9lrXt05XH3kpSOkjyE5uzOLhqdoTiEqI/geRTl\nBAQtRyRks5ZEry+VDuGTFxvQi2KgREisF4pVQhbfG75avepLDCR8rijRLkhn\n5mLEH+BERRcqRhnXEjoUEGkDFtEi6iGtZGLNUATV6TsZdQZv0v2gu2/z+gEP\nWgcF\r\n=XUK/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.774ad4f8.0","@material/base":"4.0.0-canary.774ad4f8.0","@material/theme":"4.0.0-canary.774ad4f8.0","@material/animation":"4.0.0-canary.774ad4f8.0","@material/typography":"4.0.0-canary.774ad4f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-canary.774ad4f8.0_1571285070375_0.9663351393460242","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/floating-label","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"74b28e581459960d038ea8a76b71e1b6f11e839a","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-canary.5916d18c.0.tgz","fileCount":30,"integrity":"sha512-qB9J7A/O7ceYbqZ/mM1VoWs9l0v2Nbuou/Rb5qUQ94e3eGjetnRqXfHSRl5WUI2s2WK1K2Xsqx0j7ItX+4EZcg==","signatures":[{"sig":"MEYCIQDIf0xhcpog5lWk/jEhOAurONv4HRZ4LKmHFj4bdxMTsgIhAI8Wv+iVdIZguT3hOSeX3jbU0jXBn0Ma8krMzr16D0k3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhvFCRA9TVsSAnZWagAAqs0P/RFwNMo61MG1x0L+LRDI\n6sYHNLzhqB/3ijomvbU7HfpqUIECnm/DQHccvANuKrYHsflOSePqBxkZg4HD\ns6oqnsP8OKYokTtmR0FXCNvo2Bv/fREj166Jswj9xtHMfJfAifnVZg0zJfLB\ndlkn7KmV2S9Sh4oNAwI0ZRgzIApMoDIPZJYv5uFNrjgrBPIYiFN1+64k1wnT\n32XlKDbPdqh/Vh38vxBxuv3pTDrxNWT1xVyqDoxi1DX8zHiffvxT7R3y2fyt\nYDGy/LO3IWZlsn/ty0UlEA/66/ye2Y9Gho/ZyRPBut9twA5f7j5pR8Zcsl/0\nAmmCLNiTh1BYd+9d8VFkDZukejN0/UsIG2TFDXkRKackIAQ41M3Im/fy/MEc\n0d2bvnIpyAr4lAPXagxuf7hxyy58ewW6aZ7XXMG7nvOMIvQ/H0WTkXEnaLAO\njdrqPmQNaw53gQNyPF3ko+3TOCmFOO/rmbCxrR8fPRLlLqvCxotWA7sdE3gK\nhlWcFCgO47wssaXGTMQxjBBFgJN3Imp14kSLJxhiNL3zAMtkAcKZrPQTxQF9\niWWa2huUbsKQ3dYUiGOeN9cwS4BtxeuVh6ggemGINR2ou/Y+H0zDchIO6OZi\naZHtPFSV8I0huHCDhJwGJpHXbnSWlx2YsAuMr4mbjrVZntmmmocUdKj+DQ6m\n7Vks\r\n=+eU8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.5916d18c.0","@material/base":"4.0.0-canary.5916d18c.0","@material/theme":"4.0.0-canary.5916d18c.0","@material/animation":"4.0.0-canary.5916d18c.0","@material/typography":"4.0.0-canary.5916d18c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-canary.5916d18c.0_1571429316808_0.2233875055732113","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/floating-label","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"44332900ee2ab348bd30f59aecc03b5db497dd32","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-canary.d4141c95.0.tgz","fileCount":30,"integrity":"sha512-aVlWOTitJFZrXZSbVqFum9/2iVrgPyCi/ow0mfecWwNTHKm0HIi9uskK4yzFQUYVMHeF0c2PJSPop3DsRKO8rQ==","signatures":[{"sig":"MEUCIANAkbVwa8GX6K+7IQHW0OTV12riAKNr20idlW0JLauaAiEAmRDHG8hQvfVhgtijgWup+tG3H9BivwO15SI+btzZzac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQCGCRA9TVsSAnZWagAAdb4P/0i7I7eXfrK2v3eozIdV\n5Bc48M1by6csbUdtPDOx9qTms6o+MAUL5XwVVGapkFjMLJURA5Muuk3Kzpup\nzRy/Q+W/vV3pQW3Fb5hshq3flZDyHNgQvx2TFSauI+5r+PRlmDr0ayWCSXmQ\neum/gzJgs6Nlkedka52fZ0k+thtOuW4mORSQRSRESKYkDk12b1xqCUTVgb9O\n5ZJ0P7Gte+hvlo/RG5Rb3xM21rEC8+LEpu5Oa2NFj5IfFZgD1uW1Uv8HMRfG\nK96kqdk0t7sL+baD/i8u2uzwQoVywKy/Ed/WTDt8LdfL/ItRMQsPJjMVFdEP\nKotkhtepveWiDGF35WRkxhzhJyWkRRNL2Durydv08Db7Uzv4nVup0BLXpuzD\nVyyAxLIuEf876mvFNZYuR7ztClJgVHomdR9fMXk9bkrwi0VYaeeO68H6yPI9\nRZ6Dg9wR5hZ2beMHLl4p3j+62BtC/HgNkpoywpV96R8s008buC0sgYvoJHnd\nrG9Jq/qUKMVXRLq6XRHXRUVwZJlhkOBjoTjtV9fe21imAhI5al78rjoT8FGJ\nQpXx4ALwIFA2yeJp4bXQl2DT3kZoirbkEqV1GNX/V8bwTPVThvIosbvSvMdt\nJyVl0pjwv9ldqt/ZRzkXiN2jU3rzf6EM0QORxDd1uD8K6ajakdL/mCh6JIoD\nf3cH\r\n=CXim\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.d4141c95.0","@material/base":"4.0.0-canary.d4141c95.0","@material/theme":"4.0.0-canary.d4141c95.0","@material/animation":"4.0.0-canary.d4141c95.0","@material/typography":"4.0.0-canary.d4141c95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-canary.d4141c95.0_1571881093787_0.9657771179942034","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/floating-label","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"fbe6c60ee714d6989f705c6d9107628161808eea","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-canary.2b878b3e.0.tgz","fileCount":30,"integrity":"sha512-5Pa/1WePvv+jdFSnAI67WM9LbhkUWQCZs/xEQqSwshByyA25/63tP4qzNJdaSPqIIT0bcVJr/eK+uevpkD3swQ==","signatures":[{"sig":"MEYCIQD7vQtnXH9daYYloXLx16zjvB3VkMc9LOl+yUetmzQZTAIhANNZRZFGMvVyHOPKKsABh6JVvcmyykRg9J0fuY9hnUQ5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157455,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslmgCRA9TVsSAnZWagAA5HkQAJmKvWiHs0pXjntuYVma\nsNd66Gb/E7fJOrUWNaUJkhTxtVSbgbO0mA3UvTibvU3UWGpn7chR1/LoirDY\nZSu6a/Pei5L5yOFZ7XnAVfUfWuVuGTVGtPL1CiY/8x5r12GuPI0etVlkotdC\nv7edNtZEmnecJPZub67eVsfOQH1CB0b85+rDOa+yp2i8oOyz0Pq09X3angXJ\nIqG8x1NH+QWckx1mAi23rQ131L9i9TbQO8LND3FCnoAe8fmh+x/WpJ7+yMaL\nxKAwlaPQt6YGSnsWxaH7xQ5u6p4ApWT8J3ObKtvEKgboSJ23wMSsf0dL7Yy8\ngmHJLWj+tokopwtee3s46GKmqvLC83vIKzGdcnEtRSAN72ph589YoZpXmO+c\ncar6uJHAeAwN16pX4jol4jPjaGlhpx13SFJYHxc/IuXZnqcwqaUpp4NQbLdK\nK6HQr1S/92nFz5Bj/l69MvIJJTkUXFyPhcwl+NyjQHRCd0Wz67bDbEmODaja\nf9K/4GDUK1dHjFqiIQn8irEaz77C1ORZDkGbFP6fbTbCyu95n+ixFWXa9fmo\noS+bqhpWWQUYfLuXNqtlyzhpqKQG2vi3QfCVX/GSekCvi+8GMxm4brEX1QHE\nt1Bp9LlE9CnIhHRdsCxHf7psFZsPDUlbEjIHLwQ9GLsF0RpwkxL9oKF2pi4p\n4rGM\r\n=hjuZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.2b878b3e.0","@material/base":"4.0.0-canary.2b878b3e.0","@material/theme":"4.0.0-canary.2b878b3e.0","@material/animation":"4.0.0-canary.2b878b3e.0","@material/typography":"4.0.0-canary.2b878b3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-canary.2b878b3e.0_1571969440264_0.5681918229138676","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/floating-label","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"a47cea0d0a996ec7493077cd4a263e0be8723fa2","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-canary.b06c0efe.0.tgz","fileCount":30,"integrity":"sha512-Le1iUEEddNzyJabMPJtUoGs1XNq4sCQ0C+FWrOmeBhwOzDzHAIBl94dhdCxj+XFFsDxRrlMCkhCHdjguZVQOtQ==","signatures":[{"sig":"MEQCIFHZJs6idYnRs7ECZo14WI/1sKsUydObKdILKjSUsQaMAiA8NEdkE4pBXnEsPFuTTT4yumsFa77ieRIiNyK7F2GB1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6LMCRA9TVsSAnZWagAAZbkP/RrPZGqBaaCT/RyHbgN6\noWrZ7ra7rpvC5CR/4fF+N4ESxKXOxEpL3n/p327xeu+CNuN8+kERfZq2CSjT\nkgifJVQ537ZySO1oaREJC9OoBTGzsQN5YWdmbTBbKEGF3v0XGoRVxT4RVh0O\nSS7U23byMAHxYL418gWv8XUfS7uWwpdB2C8xuh36uepd889G6gVpAdcBJbx4\nE99Vj38WKRxjMGV596NNvy0n0VP3xKjSIyDL8f8Vai/h6QvS9vaTANT2w4ui\n2Oses9YMzQBTKx6Mtwbs4Y615F3Z/h89ohCDm1XGiSK7JT8BaX9DwWVvNREl\n/iseO+G8vJ70bLh+dzHaOYjveWDMHynuazarJlKUnESfM1WAttDtKjAJZlsz\naUjARpu4lYsZoNkINkyUbayoeXvm1FTGvXXSfJPt9d4QMfPhMm0jGtt7wL4z\nLeYbn60kYpdG6crgiJmD98vsPE4P0loNT3jzv8vUwAKaC6+GaEw2ROno1fNo\nYiHcs+VcIXpKGNl0lcHJgdyaaoPQGMvn8di47Q/aq6pJMDSe7TyzL53DoZxa\n0irhkvdaSNvwZzBeHI3yZXLRbv2gnRtnt4x8bA3f3W3njoO+P+Cut2i3ULLz\ned1A26aqbCaWrHqhWfKRrknejxU5IfDrVznXnq+2pNMR6mH2/nt14kHl7jCc\nJoaO\r\n=Dr/V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.b06c0efe.0","@material/base":"4.0.0-canary.b06c0efe.0","@material/theme":"4.0.0-canary.b06c0efe.0","@material/animation":"4.0.0-canary.b06c0efe.0","@material/typography":"4.0.0-canary.b06c0efe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-canary.b06c0efe.0_1572053708105_0.5859651012791101","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/floating-label","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"e1f5f72b8d7fd0a614d99ba9fb092e0479532191","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-canary.01628efa.0.tgz","fileCount":30,"integrity":"sha512-RcAK+8bFQfHrwF1OSsBEDDj7U9h810sgMqYIUfdIXUvMGDPFg5MM0jPLtSAz/DxsAEexrGmFtb6Op9rMamVXfA==","signatures":[{"sig":"MEUCIA5/0xHAMaWN2ZZZ7qY5bmYfNdcvDjgedM29NVPCZy3eAiEApOqfwhBs+GWcrrTxPeXKOh38e8eSZ2SHUrWV1HcQruY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4G2CRA9TVsSAnZWagAAwusP/3VVg95s4pOTW/gcRMuU\n3xmKHfYPg4KDBMYgpTi7wMnb/QtrRGHAcEJ/T0tXhusywhW+vJQ3qvqbf4Aq\n+JdFVlzPA0dKEQQsjV4+cU3bZXkSm9qaCBlOcNIAylVhVxYHQVy99ogFiKGQ\n3AMc138/fqUtZ1E3v07MG3GmjVr6X4Z5me7seiH1chmEMw0GUivhdLvYNXPY\n/Xd6kv1IZyPvWbS5gCjZjSf882olLgrH6bjG7uCtzJKWnx704kRL3izRP2TU\n8H3RMdAAyDpkkbZumhc3HrpCNoL1qYI2joP+bEwUrwki0QztBFvDxcHnuHJt\nHKCQYIkNtUZ9Y1auPZNDYxJpfwjiWfmU1B9qzYf3CzW21Km/QAaK49KgXUqN\nowatM+FCiW+k1pBPUCwqwK9kvAt2o8sg6aLiFmqQjZIbdFWxkDojT2qfR8RK\nPbOQTridXAFCkkWGgi0x29ha7CQ36o+0pHTvywY/UNfKj914NRkppxmQlVU9\n+pLuKV0uo9EgGcpHbPNTACEtkuZqySjQr3skeyNXY0b9BNaURgKGWcMGpTpr\nPUt1RlTPD4TkxShGj167K7iCF0QDpGK2729GKrO1RLQG95VYnnsMmN9zyKkQ\nDWIoqdxqY3+wv7vjR+e8tfHf8KyjXQmgjma0awWMEvuuGG5Q7cnl3CZTl1Fr\nktxg\r\n=ByAo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.01628efa.0","@material/base":"4.0.0-canary.01628efa.0","@material/theme":"4.0.0-canary.01628efa.0","@material/animation":"4.0.0-canary.01628efa.0","@material/typography":"4.0.0-canary.01628efa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-canary.01628efa.0_1572307381856_0.6677922602545112","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/floating-label","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"c89f414eea3179fe72c043c75c72ad8ebb3deeeb","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-canary.b5c6d66b.0.tgz","fileCount":30,"integrity":"sha512-wBMhU73AOfJ/nnOjMl1b48/pXMzSwNEkh8taI51zMFvRvpwpJvKAvMry7K6v9xi/xnxc2hhUIPbvdlMV6eS0Eg==","signatures":[{"sig":"MEQCIGVEkQsN/3ANzS1nfF8S0w57Sh12/khPtwsMQLURnQ9lAiBhe82vUokGQkgbe4iva9RfArhEZX5wrw6cukizpY8tqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH1bCRA9TVsSAnZWagAAXYoP/3T2qnrz4E16G8ZWjREe\n+HumjgpnzHs7FeyvG+kJmAEcCeypzMCGgcT0UiXgxMXBoEs3tJisXC4nl+Yr\nfhLwnF4v/qcq/eP+IL833O015yWXQGxOqng8bYdgrdT2KknGbu1kyJsUXjKc\nkDBiJnA7EnIA5kDhmbiUmyobhSDPsDzrzEeUsftLUeNglBKLXcSifT9a2x9d\nHRH3WeEJDg0/JY3HIT0C+Bsyq7a6v+gfzSMekog88BLFRiiZxX2P7ZY1Rx3X\n8dEXa9XsOlhR6F4ttj0VPTtjJVVynAIBpeu0c7JXpQjo+3JblA1N0g32iamR\nwuTWUN3DOAD83YBTrBSVIJB0zHWJ52gzVesQROn8gf6slyV2hOmGHFLmrz/x\nEITIwIQLzBfxzvMDk3Hah+Nt/PKZk2dDPFZ4/4Hohoq384Wvd7S1k2DxoaUR\nBETYwiqO2hNGbw02NSI8xYBXpJ81kJe5woYc+02O3iPjtqFJR72sANlVPYRc\naEmeRC18E7aoXPLam6bSuBV7t3xSnRZLCKpUr/vIwgo3eVFkk3E9MwwC/XyN\n/hGpHE7igLJA9Cm0ssoavaVUHP6/l8peyvmnrIfr9MFPskt/EfPuFPXHuOCO\no4rylLoPw4gpD31Ci7Z7GdBorlmAzJyibn+lcApQJs6V9EtuLzMQ+qXMabq5\nBUV0\r\n=TAht\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.b5c6d66b.0","@material/base":"4.0.0-canary.b5c6d66b.0","@material/theme":"4.0.0-canary.b5c6d66b.0","@material/animation":"4.0.0-canary.b5c6d66b.0","@material/typography":"4.0.0-canary.b5c6d66b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-canary.b5c6d66b.0_1572371802708_0.11592965837859603","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/floating-label","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"4244e524a0cbdcc95323beb8c458f8322d0a205c","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-canary.cdf858ea.0.tgz","fileCount":30,"integrity":"sha512-pGzPO0s7ruKIIllsoq2yv+QYnYc5gyP3Pl10ffrNiRj33L6Jqm9YwXf5rew9/uEUBhvBdMZPRdLVv8XPOWuX4A==","signatures":[{"sig":"MEQCIHWBj4skxqdcAtKkUr9ulWnDpZ2GyAMoHm6IkXnpViXsAiB3OKQYx+0qA1Zc0mmw8B0vqgigVrnUNvXm/KlkWE9IKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHJeCRA9TVsSAnZWagAAOhgP/ix8Xkic/Pl0r/MFxZyB\n0EFGo6i/RPcI9c7TZHon4SgfpY0tQQwsh48BbMe/57ECE/iSlYZrpJDwLsZg\nHVw66BDMjTnwdsssuOaoh6ZQpUNBgPl7QrymkskLCYeneNaBscs3GO3WnnOA\nK/F6D9hYN2P6Zj/um9L+vSmu/i9eW5PMMj4cqDB/6PbElBvLgbV0lwEGBaky\n5vhLv3nbAiKcd4XQhdS83Www0q83D/F4z0YJTa+GuLNyuY6PCiazOTfz1md3\nhPKoDVQt6sgKAR1EpSntSJ2rNN9AdXXcIMZdARmGSz7iCmX4hjcRHohR+q1J\n75g04/Wu82s7K1QO0vvceGOmUIObPbXQ/SN95vSRu5k9yK6GhTN5lhhLL00b\nIcJY13OcYTpI6OWLPjdwvmLNyYu6iiIU7sthwr1sHjbw0x2sd8TRX5JS2rGj\n3SjS7rFAPRjUbrsFOlX/d7vhQ2POz6OIEwXsKjbG3HIpKYz/rVprRV30J9Y+\npMA3fAjZcJ8b2JjXr7lktEkR8J739At7As9d3pNgWNDvqrUU1CIvrOWnxi53\nD8jxZHJP/VnUiboZ3/6j2pRi3Xt8LhyHuQam793UDUAktMFHem0w69fq6vDx\nNd/MlIpE0FuWDU21Ym8cMNWZf7U/GS+Jr/TaQtjWWMQgwftRArWZuNowDeUz\noCRj\r\n=e5X9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.cdf858ea.0","@material/base":"4.0.0-canary.cdf858ea.0","@material/theme":"4.0.0-canary.cdf858ea.0","@material/animation":"4.0.0-canary.cdf858ea.0","@material/typography":"4.0.0-canary.cdf858ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-canary.cdf858ea.0_1572631134324_0.42955930533352804","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/floating-label","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"7e8b4914a88cd45e17cce4da0a5663549e6bccef","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-canary.719b57e1.0.tgz","fileCount":30,"integrity":"sha512-IXAq+aUIfN4dvSF9xRcug9XCajMU/uigPRaqxMxLQ+Nb9saT3pGnYW6bkzDLjAHLDu6vCxj5hbct5l0sKizKhg==","signatures":[{"sig":"MEUCIFnnBUH8i9D+4WwUsNEC8mxa/CXNCxGfS0GagJLfCIF/AiEAqv6p0xEQfsHldDovXhKK7JmDXNDtOLy6OWcWXuDnP/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI8eCRA9TVsSAnZWagAAnTIP/R/Me1TTxvW47Cwwsbx+\nitIDIsGQ86aSeGTsRpLhqcuWAG3VHjuiLkdXCesdXtsdRWKIm//O4ihGC8L1\nA4plGxz5zqajXPeuiza5gEt4wAj8tYXD3XzIFMz9oUPphww1NsoxhDPKf6FU\nrn9PJjFCgT5Bh4Wz8tvllHfVQpPGTV5yfw4/B608Sizf9HeYE5ebSgPNoiYb\nAh5NUGQLTNGgz9ZXowMAbBt+wKKdUceC0cchCLtqZQqlNhHN5HPB8HPxA2YR\nuRfpqUz7K5uqf0+KCJc4rQnP3g4qX9ju/7I/EbPJKAy4xcxlZbrf6gUXH4O3\n9luQ52WoAkcG0s+zhqyPqXQNo1Si/2JbsXWk3Ajjn7SIwU1yhJC7PoEDPXno\n3pcd2lrqnga88SmRpIk2EUUNZTTKZ0Ea0ABA3n/M6WaUc0+TfrX0dpTeb6DQ\noe25aFS5t6wlnwqYEb4kDE8K2u4dHGSaVX4CpUN5mDpxUaTAKpUQ74EKZVIE\nBUIRyksVRXEnMK8JGnsyA+P3UeSWL4TCBWU4YOMhyu2FVOQbnd6ybcqNqhkm\n4t/LPpEoLEb6eqTrg4lto7eoISAfduZ3Bh7p50kO9S71txv7zWk94zvEfj81\n/nZfPs09AaR9T1ZAsN0708V6bPBTBG7Wtn81mHzLAP52Jc8SRfQalV6bzoCV\n0EoP\r\n=I9gp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.719b57e1.0","@material/base":"4.0.0-canary.719b57e1.0","@material/theme":"4.0.0-canary.719b57e1.0","@material/animation":"4.0.0-canary.719b57e1.0","@material/typography":"4.0.0-canary.719b57e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-canary.719b57e1.0_1572638493683_0.1451636099750635","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/floating-label","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"a5afbef86986ebaf2914d3108fa71ca22a44a87b","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-canary.97cbbdc2.0.tgz","fileCount":30,"integrity":"sha512-F08w46YjdrYqrQ7OQefY/k8tkMzulBMgbbPg4YWs/vWP1cL0LaKmKLGTeFo2DoxcqmmxaPxcPW0VaUtO8o3sOw==","signatures":[{"sig":"MEUCIQDjHiCqzcvFh6o9PXS9UtD97kWrM1/AioXmnRO/k2TiuwIgLLEiwWMB59OQW7BVVGjqRULHGiWPa73fpY0gWWDcGro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJWXCRA9TVsSAnZWagAAkZQP/iIpotqT3cpeTcXXOwo4\n3e8awUw4t7S0taBvf1Jbg5L5RAQl7ewAkCcTETgnrldnzBIjR2gd+qJ6xFLG\noefbF7GLW55+V9tjshBLFL4oWwnVk2A7P9Ly2q2oLpi8pewBcyxMj72BTNys\nKnjg/cVA8V46tYqyb/owKAz4It1KcnY2+8JVhNBYzdFzYXdVYAcV+T0wXnDj\nsCa9Q4y200CehDxvz2kCSWS7nLWCFrpzgMqyjyKTGNlcX1ypduvEVIPnjfgq\nJ75HYbHSz2zYNADInnZS046lDEFvI4TKdCRec2GyQfaQ32sdIkxbj8mp2p1u\n9HiLO0cfAD3uYaa6DkxRqm9d9vvnAABPenb3Cn8FXU3LNczjBKTe2yvumFIf\nxIbWRWKZsBMBXKLVVUBh3IFT2I7GsxkgD9UjXbyCQYQkVOEIuhtqw6SW99/g\n9WrWcxTJbciwlmavfBj/yJHfbk5lYYxAfKUWnkD2sdZzrD5pGw7dVejebANU\nO4rQKuTEbcb8iXKndWF+RUi1Uz6JnQO5QscRucJSk4cWcCcfCBKm+K3nmsml\nbbzfxDqLP+oBrBj3LAfLs3cKJtbR22GTV0TJ68g8gqLe8NON73y7PQqqcG2J\n6SXuaBIcMIUUWVc44WmPtoIXUBUQ8He3FSboalDWXPd8AVXKWtQoR0KHXyzc\n0rIJ\r\n=b/oj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.97cbbdc2.0","@material/base":"4.0.0-canary.97cbbdc2.0","@material/theme":"4.0.0-canary.97cbbdc2.0","@material/animation":"4.0.0-canary.97cbbdc2.0","@material/typography":"4.0.0-canary.97cbbdc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-canary.97cbbdc2.0_1572640150917_0.4718680603505583","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/floating-label","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"a1e6113e86d43f10eef56e239ece1cf108beb24f","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-canary.8e36b3b7.0.tgz","fileCount":30,"integrity":"sha512-rCiRZiDWdVgx3sgFSBq80zN7iB+Xn0c90Y1gsbiLcBzqQOkAtxepH8/dExJuFxUGKJ5c9USvOXMeNlN8l8UMWQ==","signatures":[{"sig":"MEQCIE4v3Y+4VvRtayiIXQqO0AavmBqN7hU5hVgtDD4vSo4CAiBMS0O6Gxzx3PsrVp+zTkj3OCbkDASDSuFUH2tN81iGnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ0aCRA9TVsSAnZWagAAWg4P/0VgsXJq2bGQB5qbe7bv\nXdnWWurKO3GPtFj+u/0MRwlfuZ83Xc2Hz07+hjZCcpeoAhqT5Ijz4UXZwJGY\n8ILvWsgmRhR//6WQ9pcGaQQJHJlJgBTlR8EvKkcdE0ap1xDh808CxVz38Vmh\nmH4byshop2Lg3+d6jMVZktIslp2WKcrEadNnlutiMX1K5fg+NoVZyeJXvyvN\nhQ+ZXaS/paHGN3ZMDScueDkI4Li3PWnqpnU1CpyH8czrXpvHfU+ofoh+ghyy\nevykg9R39PnaCoSfAEENf5gZj2GQ8IbZYlDHCWSOCI/DQKuGWqF5UQnE3H/n\nrmEflJDqs/lxOe4StmX/I281580O2qPbCYHBwUi5EPvh2ly2+iwBlf/uYBAH\nA3Ws6LdQYPTlBVwQzT3Z97wp3CDC/qG2cFi3OHE0T8Cf7LE2JmVybFeI8bSS\ntFw5Wj61PrhF9E0EC68cif7/A8I311oe9VmCIRKY9RKwKVevyKBov2G6kAlA\noN5rnWG0mdYzg3rHFuQZ77MOaYC6ku5Z/tfTK0GZw2Etyv8ZMcn9dpiQ5ECV\nxFWGgcf8s/QjMYG3fzPPAQOoZwi+Upv3UqMaDA39cBRj43F22hi0j34iWUf1\nTk713BDLQTay9dcpttao9hC/J/n9GLqqVFwcH5mX0YzJE39KfJIHXYB7I6A2\nZAli\r\n=r5Va\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.8e36b3b7.0","@material/base":"4.0.0-canary.8e36b3b7.0","@material/theme":"4.0.0-canary.8e36b3b7.0","@material/animation":"4.0.0-canary.8e36b3b7.0","@material/typography":"4.0.0-canary.8e36b3b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-canary.8e36b3b7.0_1572642074574_0.059708104243055615","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/floating-label","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"3d7723e5b1d867ea657ac540a00743d5cb9aa988","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0-canary.62d3a09b.0.tgz","fileCount":30,"integrity":"sha512-slTJb8iciQG9yxL1avFC2XjdaLDTN3n4wYkUbs01s2uHQ8YyQ1jI4cu6dUpCmK7t4y4uqSxkSNdZk9c/70ALAA==","signatures":[{"sig":"MEUCIAdC5QkvBeXdK9DM87SlcThiUMiS5Xfs2Z8wk+xwpJBVAiEAlpvaq8ueImdZCzpx26LqDFylPXP3Lam4LR+Il//3GCk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ9YCRA9TVsSAnZWagAAlkgP/1aad2ye+8t/b8QXDj7Z\nLODIiVLreITcYTtTDpb8iLAsY62nlk9MdmEtqFRriOPjDlTSSgawE3Dr/lY8\nHKHbKRA0EMSWR2lcXOS8HyCEz2p6G41E0ft+dAYciHyKneMkBaprFWc0aAbz\nLtm6PJ9Rgwd8I3a4GvynrUstGXYfDiGb097YMEWnN8RyZdjj/TAstJ/OMY2X\ncFWOlDTDqH+A9jG6Zc67enMlV7jLNV1WPNdaiSj1TJnD1PpApQBlqG4q+cNU\nAeme5lb9q9aQKcXh+GlrYlrHWbToVMwTe5gc9Yt/i6tNn2U4/Ukl//ZMuGby\nE6yRxJPsllp8byHugWEO5e7gaRh5tsurfd4JYIdjwlMmeS+IMM3HKnq+DNMC\nv4JarHv4HHXyaeh+iSqfhq6+wNvbcR5+OtraaGN0gpvnL0OCusTb0aHBtxsO\nYOH/G0gFx6MF8J0+6qyCaGhxbpsJ/X0jx7lXTR+4wsKfQ3jNN2QUFEEmgSIv\nlYpWgXliZhil9XGgGYMWckUETDvN7VqrsrQunzDr0y+d8CerNdzQ/nTa8zFL\n8iDLqu1mBT0kuYtYdfQF4RKAX2+jirb0ZzYfsTEqsnAeeesuv1Y2DAPKKra1\nnZPbqNI37P07v/6Pbb0CI5/TaGs8hKG4jWQ4OedH6hCqmLQ/1tcLYZyPfGmB\nBejt\r\n=2CEP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.62d3a09b.0","@material/base":"4.0.0-canary.62d3a09b.0","@material/theme":"4.0.0-canary.62d3a09b.0","@material/animation":"4.0.0-canary.62d3a09b.0","@material/typography":"4.0.0-canary.62d3a09b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0-canary.62d3a09b.0_1572642647884_0.9325937237998321","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/floating-label","version":"4.0.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"288eac6b82ff472472f678032fc94024155a42c8","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-4.0.0.tgz","fileCount":30,"integrity":"sha512-ovuZKhH7U+YmZk8kXftYCdEaU9InJdkBsPe4TP+dg4HiO1lWmd7ZxVsMo6iTl4yaFofkBPj3VDkbE1fLnHxKPA==","signatures":[{"sig":"MEUCIERjcA4EQo0PG2iWU7ytYHyCG8n1m4A5G1dyWxPsShebAiEAw6pOkddYQdjOTt79+Kv0b5yrFR7J9vm755g9Ravi4CM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcbeCRA9TVsSAnZWagAAubkP/jUaaf3aq9ZFHxjrem8b\nG6bT7kA6E45yJOBZW+I8Dm5Az/P93riLnG5eFfV3MQrUpbcCj9cDSPdvnGDT\nstJpeMTiTOFYwlWvXx64knB1k+VKVxqCu62+jtnxUjsp0yZK0gbAXYsCcmSA\n6yt54xgi/Y4uPq1YewE3h5U6yeZKgEO2xHxi78XIM6B3kN6xss0nblXiderw\nReEc0kZCxgGgnNqelF45jtFn9TPVQAeB4a6kPIZIgH0Z54f+9rylJYAHhXsX\nCB1tIjO7p7c40li/GyPL934yZmdjEIK/TYwdVJOPLI2mwekQitlSxTzHbKbr\n0mAaEC0ByWqxrJ/WsjfJt5+Vtrr81HPWeuwmBp54L7krttj5b1eFG+4SWtaM\nqaQ5ViWOz3BZg8UkxFwgKkXOrQthy2jjx2eYW1Y28jYRVLMm8FpSOaRtOjfv\nI/SIgQoOZONzgNZABYXyvTbncD1rf7WghxAl8QzyP013kAfz9q8BVecVvbqD\nisjvx6Aaf4m/vOqWRB4Dh3J1kZ6o32IPoa8xMb3Yvc+n2QJQpoxf3HW63EOX\nNFKjXC5KBAkT6Y3LGhSLe/ae7IP/4mlRDT5my8ZHnLzK2GYhpVovoJIrROeb\nMM9re7N5WEp+m560HrOgyB5Y7cU8mXNjfbAwy/qLIOYCXTJnWF1YAaCtAcjb\nRcWh\r\n=qVn2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0","@material/base":"^4.0.0","@material/theme":"^4.0.0","@material/animation":"^4.0.0","@material/typography":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floating-label_4.0.0_1572718302453_0.3910656214710153","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/floating-label","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"02244b4cc862ec42cf395d8d90d0d17d545ae63a","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.b5eb51e94.0.tgz","fileCount":30,"integrity":"sha512-EbbcXx+Pbu7HExs09mT+r5A0ZJ7A6w7rWD4tidot+xeyPDryQ2gJ9HWLkRDJrwThQuMkRa6v5FNVCmlEdREL9A==","signatures":[{"sig":"MEYCIQD4opxFU7/53z6x0/jXbSI4DYkNr7R1hA/Z0moVHbuQUAIhAMaG04N6iE7FPdfFmBIEwROfhA3AGqNiP8EU4pWsEV0r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGOGCRA9TVsSAnZWagAALmEP/1LP8okbZaHH2aKQDphV\nO2berBxJvedkSSdKTbicOfZ3ywFyK27zPGYvO6+DOlHSWREqRsUlIlujboz3\njTSPtPX3GUeEX0vSTRXaYdLD9LmFZcSex4egO2ckjNGQlbtwGXgOiRreFeSK\nqTcHhGDbU0m1b6S2jFYu70Si6EbqGwHpRziT6iy1n5zpoUphG8g3KXdGPgO2\ndKjhGVOSGoeo8ObgPTPkhSqkIMyHg6mZdmHt+hDol3SVUIyAfRENDENr2+A6\nG0TzyuEQL9ARCOVRqjsBtguUu+9QIZtiSo5IfNKQp0JkKsLVr1dqYv65bCQX\ndgP+OcnTq1zIyIsR2/EKYxYMDZjE7G0zcNYqXAD5i2hhKcDrRArFj9MoimH8\n0LtUBRPAO+wOLqh7tYwK3csnpWFAZ2tuUVT3GRPH8f2te4Jv6ZjZs7JTaLgJ\nXzt0EyHDg4PEhfQsFGJ0UP3ekh+9KjbkyiRSnvKE2woMyKDw6RmA2zK+qzRq\nglP/GPmw5ih9hhLFTAl88g+bbIePerAxGVRuYdzVfakXCbsNtIyXj9qpY++d\nbo8tQD47XFtWKCJzJw4rDyuRbV4iHu8vKIa+XyOP/zuLlOUcuHd2pOcdtxnT\ngoAUKQBGxqsiFNY3j/dgGSs/Kks4oGRVz0hfPTA5aBcnc/OCi0L1l6IDC4Gz\n93pP\r\n=DI9W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b5eb51e94.0","@material/base":"5.0.0-canary.b5eb51e94.0","@material/theme":"5.0.0-canary.b5eb51e94.0","@material/animation":"5.0.0-canary.b5eb51e94.0","@material/typography":"5.0.0-canary.b5eb51e94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.b5eb51e94.0_1573151621703_0.630852872143264","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/floating-label","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"c520e490cf1fd427e767895ece1b2ecf0da40a2d","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.58500806e.0.tgz","fileCount":30,"integrity":"sha512-gkx44SXwRRIvuB1AtyztfRgnK4OUc9BjGbyhjUdS0IlzETI8D0MuvHFRKbk/of57AS16YGdzdKGTo6brH5cCDQ==","signatures":[{"sig":"MEUCIQDKv2OUqeKKv0075/KOcEMf4IgUVCwY9Tk3c95lfpxNUQIgIIRQmWQIUvR80DJxUw5dGKVvF4xRZvRLgauOggPXp+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYtTCRA9TVsSAnZWagAAa+wP/RTIm3YFfBQiewivFJSp\ngR46d5sv6pQM/+7eOQkQPaWO9kAFlkPnvYq14+rG31KgRCqsdGBAW+/uDS6n\nSxNM+9fxli1LOQiVq0e8pqWzS5fzXUdt4y1iQl8WeH1OzzrcQ8hM1c5Lz+n1\nQ5CxMwY4Moc6YHUhG1asLWgOWrbZ/2aWV6tNoc7u4Ktx6M4ocDAKMW//Ksw3\ncQbNrGhBGI6zukU4m0by3QoCegk7Yk4C3Y3zghoRDeW8pjkXwI7+0b2yJym2\nKEVh3MWD51fklHFeTwwwo08pgKDWezRHBm7Ssd62QubvY/iBj2rdvkAqVA8Z\nXfJ/SeOOij88AOo5B89R6jmcr7M/f3xxlB+GSQc/MUb4n9zxOjQih/X6nzi1\nzLmDunVtssCT6Qy/G4Gy6QntTAsZrQfUwBAyRA0vMMa8s0xLWrj1mf+QLuzS\nBZK7bUJmHPFnPwLfwA9SDZzWVMEQffw6DhxNrWlAOJYipnoWJPZLOhTJgQGX\n35hffLb+YpqQhdJq1m4Oqn6635VNpv3sP5v6o25eIuUvHrzM7nbSdnPw7Lih\nXeEr+JLd2d9IbfsHN1cllPSP+900aEYRIaHxP0njwOFFlStUCyWXBM7HRYjV\nOsTlJmDT20elRurskVak4xD+a2UrpHWJkgH9Ox12K+LQdD05LpaDaKo3fQoS\nRI40\r\n=tIlR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.58500806e.0","@material/base":"5.0.0-canary.58500806e.0","@material/theme":"5.0.0-canary.58500806e.0","@material/animation":"5.0.0-canary.58500806e.0","@material/typography":"5.0.0-canary.58500806e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.58500806e.0_1573227346904_0.8106284644134141","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/floating-label","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"7d7985d7f600388cd5aafe051fa18534a593ebb4","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.66299b646.0.tgz","fileCount":30,"integrity":"sha512-ffQ/hUHkTXbZaqD/dndHJOrnN1JBZAopgUL8/xqfWO4CdqvRK2N8v7Qu1bn2pvvIUjd7ZeQCUtphyrtFS71OYg==","signatures":[{"sig":"MEYCIQDpbpQ2xXhYTebtl5w7DrhCUDhbGVYTLfc7pmDDcZy86gIhAOtLMwmQIHmZJk4nfytcyv5lZQArfAqAOx6yQjo375Ke","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdEnCRA9TVsSAnZWagAAg1cP/i8MlL3T5+ZI7JX2EHX8\nR2a6FbkaCLOmEif8Tb5gfMFzTSFTe4J4FqjAQ3cGa+OApuLUodBNTqEtgzal\nDDd+but/4Rt3e8WmhQXeyiTMJ5v2bqhCKioDhTM9AsOug+QexdA7knAtIXmJ\nfb0OwyOsDia/1b2zZFHNSwEoZCBCV5eYPAGv8ghR3ikB4Hbn2Hy1XOgc8XXU\nKhJiGz5mVbKyMRsmwaarD5FCTOinJig5QSSv5GXxc+KgentqBDgWnDMGbYDX\nDno4WYYkfdcvK/DP8y4x51ugWy0/Y7Ka46bQrndON6yMjvyoFaOQCTJZZVUi\nNVUpV6c1ZSuErcO0fwtfI7QwA2oYAQh7xm2ATUq8Ha4NlByRTEXSgDF6vWJP\nB9NOaepIVkKnz6rhfW/gVNFDaSPOofcjS7o+RxXAgcI0oe4fCDaTcvFCnrvf\n9p0nJfbWBKMItFwSuA5pjgzliq1I23Ejuyq75TSzUpWPQf/d7KQYpdMbqWwQ\nWaPezJn/W6gBACgRQVEqdqEOhuHNlHOKc2yIwlhxBpj6kpOB0Z+O3j97jn2M\nq6drs8DbzNw44+Dql3sG9EQj2Sdo+Gg8dcwCtazdAUs0s+lWnu1QTSB2ClqW\nh/CRmYAGzjqUs0LHsSfpZOTRYcwT7VsZf9kYh2W0C0ZWKVwd0fu/StZRhGbc\nsA48\r\n=jPhK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.66299b646.0","@material/base":"5.0.0-canary.66299b646.0","@material/theme":"5.0.0-canary.66299b646.0","@material/animation":"5.0.0-canary.66299b646.0","@material/typography":"5.0.0-canary.66299b646.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.66299b646.0_1573245223216_0.5431939581068901","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/floating-label","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"f014d0ed459a523c9fa967521d7ee52341a741f7","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.821871e04.0.tgz","fileCount":30,"integrity":"sha512-SwwRAwXQ4wG93cbnV/MaCWYFvQVJca00NDTJbQeHJ1bggPsYG2j8Oj6UpKeF/2ToJmS5S4a8cRAV+/HYfojfFw==","signatures":[{"sig":"MEUCIQCa8L2tYmVCeTPc6Z85lYceAKXJb+2SA8pKA6aoTGaVUAIgWfXYBfIN9PDtmzoo7pl7nmAh2LCkeqJIYYsVKKPjZsg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd3sCRA9TVsSAnZWagAAhDQP/iTLvPjHCJ04XV5xRa0J\ncAxgHi6u1+BwRFXmR6np5BJa467C1k6xiHot4F/qwHrg0FKx2VvGlzKn7OPs\n8B/jEEjNXORnI3AV0uAeMumx0rYjlc22YMqSBRF86MusuS8ZWadyMTVkzXDA\nXpWbZ3z9CI3sac2RQmg69lWTABwFdGgjOiM4PzdufTuN1FjvkagPfMum9a7B\nptReLE+qflanP6QhLRERqh6KlWQ/vxSca3v08EOKTeim5FlSkOq8fBQKJco2\n0aBBsQMKBCF/xW2C5vfIDk79XZ8V9/X3XUJfSK66z9Tdr/zWr9KlNScm840X\n0aX86k+DqoMnyhh63I8Z6W+7cI8UvBeGmVxw8z7IsOoGXwWCPmGLBxd9GfPY\n1xhVH8ue7EIUEliwG6xg5WWnacrP+Tca5ivwk587JQrfzyzjOs7XoyDynWI9\ng5tVIh//Cpoyml1bmioT1Ixori5aSp0DEdeXC9sWn6BF29GSJEgiRft9X2ik\nruf5C1blRrZRTsB0y6b8eWmXgeksGH6TZl2oToaXh7rDA8m3lE8fig3wULeK\ny6dmKefjj3MgUgyTm1T3SrS27VInLtZEQkhGZdSzrTDsPc5oT05+PmFhisNp\nK6+XCjzla6/tDwDaRedxUdKP9BmNb+ExlJNdW9a2hTcDvJqneluy6O706+P7\nYPOm\r\n=X+sX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.821871e04.0","@material/base":"5.0.0-canary.821871e04.0","@material/theme":"5.0.0-canary.821871e04.0","@material/animation":"5.0.0-canary.821871e04.0","@material/typography":"5.0.0-canary.821871e04.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.821871e04.0_1573248491652_0.052273161378831645","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/floating-label","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"d0761ea91761f443aa24409a41d6d9acdd533dc4","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.491fddc31.0.tgz","fileCount":30,"integrity":"sha512-7MTWGXhoN0MHfINvP5i9qaVj3zykG9Bstbpr5arbvXYrf1Rjd7d9Pm479pq2GKYparVbPkstajzwlbHgAxZ9SA==","signatures":[{"sig":"MEUCIDrNSHsmtWT0IA1jpd1XSbhwj/iTlP+/Cs7iuB6izok9AiEAya1ELvCa38jLtVU3TwxfOWZli4i/spiV7vBdE2gBnOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxecSCRA9TVsSAnZWagAA+ysP/RG4Bid31H6mrh9OtPy8\nKoc7tObuw4+yHxclC1fNKOgW7gJa1wEuEaezFMef0RhXptSqCPKnd4WDUCqb\n4gNgxSQWxqbP+5vgiBTjBIvpH5JK8r3sbJ95mafIFd3dVbBeIaj+fqIiYrfg\nQ5t2LbSPDEyvcivhaMVAHoAXuTG7Bxp7SB7SlpVwDgTrvxO2Iq5GBWoPeeDB\nfuos81xwWdGwfxDTGsqYlxvoMwqHkxOG6PqUWf56zbHNuzrdzfJcUC1WSUEG\nBrSjfoj+sNo9n1/gwFC2mzix5Pv+6qNdHFVqwBPC9ljW+WkiiBE2AKgBkK9/\nZT/OZebRxqKY0xd5LchSN92AXZ5mu7F7IzFFfSrMZ040Mf2TrAoxsQv3F93v\njVQG28+rHY72R7BqiEXlwxcsdxMHJt0etPE0dSQ3QVAp16EW1EEFPeTMiJjU\ntpqk+9vD85SuHdt4IR+zfYqv0FyUJyVY1Dz8nHS9UoBPLgO0tvNtIJZ3TTWJ\nejKI5v5xu/U2+D8nXqnOvtyOsEha/82vXw6LGQIuxDRRuofkZrjmnFEjV0bJ\nybDi8rf0kSFXEl4Z78hV4f1G6At/fHTnlaSRM/nvRaOgmJO/BV74U0ZTCFid\n1zEYLIqeXUg38U8S9ViWivldQb/M5w/htn/b3WiXCbdReyNbwzXWuYXKNTnG\nHQVm\r\n=phFJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.491fddc31.0","@material/base":"5.0.0-canary.491fddc31.0","@material/theme":"5.0.0-canary.491fddc31.0","@material/animation":"5.0.0-canary.491fddc31.0","@material/typography":"5.0.0-canary.491fddc31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.491fddc31.0_1573250833884_0.6982988605859615","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/floating-label","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"4c5bc78d3e8aba65e07064a8542e5abd106ee3ef","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.b0cecf145.0.tgz","fileCount":30,"integrity":"sha512-5xDzlEFBlnBZzhqgOa+zrJ1A5OTWN9Tjp9zzFE05uVTtE4CVJErL/Jk2Wxx/WnMPnF7thPoM1nX+HoPBLwtcWQ==","signatures":[{"sig":"MEUCIChhZXandE3O/gAteFakcMqxbfObgZ3omwev75T/3p10AiEAk5p/RnEAPyaK8DEPastBrbV37Xjb3DCye/HS+SXInL0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwiQCRA9TVsSAnZWagAAsMsQAKJCjHZr5KzjAbazbDMx\nXwAfdvwFDi6cplx9yzmQql8aZME+JQeIPmUPwfA1mAk6ELQ4O64B+hg+tPYV\nSNB+MVxlg9xkPb07g0RsmeUXJVqJ+vVNIkaQ533D7Vwz5J6SgWbF5IrtEzgM\nEcBIVKcA0TcNLlMZOHkqenBHX2XFfSgF/l7ihVyc9trvHE5FJqiK+G1424p6\nHp7YbC+dtOqZqfKJvbqz4WHB2w7pDtR7300iZw8x6WJG6cuveoMcxFxL4Vm/\nSMFr5ugTDs4XBNPoLW1osHStqB7qQK79wgnPtN43SFGaTLYlXKNmu/Diq+st\n4pvaD5WGqbs8YfPWWouit7EZ8YL2euJIN/H02rydevQyaigWNDH5JfjNI9s/\nJsWdZQopEHjX6rcM0DRs2l3DdCRRVtGoD0lzzn0sdpm63EaHwgNEOOgKJGld\npMF7NcbaSsjmoVgyUDxvvTn4dFYIGIw4vc76ltR2G72kUD5p5zMOWfsjwWx+\nfsKXAfVWxoYf7TX7zvJjViSYWfPZ10zSOQkQNUtUXWCUAyG8LbfxRdGLtST9\n2XzPmNHMOcBRGxtXcksfosdlEI+BIKaaujdDP2F4F4eY6oLi3GmmVsihOgpZ\nMnETBuuO6Sz+x2uWJGaFTk3mJIbNUM4SOQCXqli4RC4gPnETB95GX7ETjVuh\nD56b\r\n=W8Hc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b0cecf145.0","@material/base":"5.0.0-canary.b0cecf145.0","@material/theme":"5.0.0-canary.b0cecf145.0","@material/animation":"5.0.0-canary.b0cecf145.0","@material/typography":"5.0.0-canary.b0cecf145.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.b0cecf145.0_1573324944600_0.4704965441278377","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/floating-label","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"d67fa7211a0c6a0c938123c29dcd79bc62bdc0bd","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":30,"integrity":"sha512-w9uDQxAGFQr8j8G0ZBJWMVvW7wSpBmCVM/y2ina5/IIVJMhucDpmHfccmjzekKUDDcrvJcrPSNBqZp9PNi+jqA==","signatures":[{"sig":"MEQCIANOW8mCtojvP0LYNprFuLKbxC8xF0ER9Qf0fcWr0CARAiBiT6kkjOQrlkBRcha1tz0CKCadsHjmCpMDbsypQVL8kQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYBHCRA9TVsSAnZWagAAbLYP/0TQkXQI9YLTjEIpbpeC\nvobQAzv501h+Moj3/xpnzMOrVtuqiFY0JpfRQu+rdPrMi1b2T7sSAiPZkEH6\nKps/zgrlf1clA5DmKCVYInX5v7J6UeG4a/y0oOCkF1vJKObi7HEB4kzgkngr\nrvnELJ/ghslBeR6g20r4U4lfesFtbqgPy5DCVr1O0S8m/O9coUcp2Leq1yfi\nwSo6Ojm+7yaeftnLIvt59umAh/lq4AffqDN372CYCRnHkZ5P+6v9ouRmcZz/\nVZ+P6qiANQRMLubYLwSBO329M6kw9ik4uZR+VlA6kMqrjBoj8ZtDLb8YHWYx\nGkWu3WCYi1QAQUcDcGFdXgmrDQ7rGpjyLmA5o0q4GjadzEGjNjkdLrC8oAbw\nqaSOY8nfqXN/eMFDXsanLMu6ztW8muefwrk/hmbISA3ohTnsQXOI5Pp7WJq+\nx3JH6kTCl+IDXDO2mMKdTlK0crZ+V+4YrwxDL1VWUNLS495W5yi6Fxc5zcqk\nrkTwVeDd/qf0n29wC+hKwG2Apt2VXwsWC7A1MSCE2URHHn1asW02DyS+nNfG\n/Ggd0ehIpRxQTZCQUdqx73SDEhHJnxruhs7ycszlJBp1mPbM+qmLwwK69YEP\nGbaUjmVwFCKpOhLUIt1XetfGKtQUrFG6Bd2MzNFzyZlIZ/80ipknMrEoODvG\nFQZy\r\n=BrJK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.afe0dd1bc.0","@material/base":"5.0.0-canary.afe0dd1bc.0","@material/theme":"5.0.0-canary.afe0dd1bc.0","@material/animation":"5.0.0-canary.afe0dd1bc.0","@material/typography":"5.0.0-canary.afe0dd1bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.afe0dd1bc.0_1573486662765_0.6323327078324781","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/floating-label","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"2807b4cf8cbb86fe908a4172639a0c6dfa919e65","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":30,"integrity":"sha512-pVyCDHcL4TMxeFo8pTDMEPrmHoN8mupPA5yujg52N6IstjO5VvRtQJeG5Mg0lDUIQRJbdtvl32L5E98qkMQxPg==","signatures":[{"sig":"MEYCIQC0yr9bAsvXJkEExP37aYSYfyEYUgE0WDcbl/E2lgtA7QIhAKC7X8x8X/Ax7oTH2Z2mqVE6jSFqeWHbLbchEWQnvXDd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXmvCRA9TVsSAnZWagAA2PEP/1XkkkzM7HXZX5fSGbhr\nUFT53d6mBK6bxTi4gLIXCImkjj/DDl4QSR/1D8DW85KeGScBgDSrTKrd/5pw\nJ09ZFXYVb2uztYQx1VXFfq34K50x1IRMTRhQvbw+7kKsIQ7T+yatuFZwfZwg\nEknsleQw2U0ogv/Wnjciu48YAbKLiEFfBesTizJi2YDuuEeSgnTyA2JpirTg\nC1XcxFQStkIfma4PW4ZyDIREFEIkdMQ8MgGJ3hLH6eDOViWQzTBzsLYqIwsL\njPpPTSDZrB+SoSAiRaFeu1l+CrVBp/UejU+/og8iqgASmvZbL03Tn8rz6lEA\nFDVqaIhZFM87Qr7llDuxfS35NLXSEZUutLsZUKvCRe/2JaVay4zDAhjEV0DF\nKmw5wj1JJaDQxLXrCgfsnGJd4PEcOu3T/zvbcefihiLW9EbJvFtPtlKmK6Xq\n7iRzZghTq9LjBo68wQ7PdIlzRUU4X+11P04EE6Itapg2b/n+DE4pdpiAeqG8\nQGKKffEjftur1NE542zeoAEwl/a/xElziDwcPI9A1gPRJMZ8E0J+Ok4eqvzt\nZzEx6nZgq6P0RxwcdqAG2XGt+gSyGgD+DqZK63wBlggsBTkzZCbDGn32fnfg\nDsaaNPXc2cW3+KPSvv85IvAzvcPxhEm/jM7SFCoRWs91dZN8Ave7x3DyLBrU\nDxJg\r\n=YgtD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b4cfdc40b.0","@material/base":"5.0.0-canary.b4cfdc40b.0","@material/theme":"5.0.0-canary.b4cfdc40b.0","@material/animation":"5.0.0-canary.b4cfdc40b.0","@material/typography":"5.0.0-canary.b4cfdc40b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.b4cfdc40b.0_1573747119211_0.03509119046629272","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/floating-label","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"16d1f4419941f808c45bd95b6605125f65165e78","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.525989b5d.0.tgz","fileCount":30,"integrity":"sha512-9MTfgP4E/CK5V+LpyCCLXhni8jWZFYE97HIshyhNVPPZT0FCCxuukNBb21b4z7iu1cSGeet5bIAE00j6p/TySg==","signatures":[{"sig":"MEUCIQDGUv10v2Md4uUMEHgMbjih4EBkXpefYTBsdEQFDLDGeAIgMr3kdOCA04zKyt5ENw2J70wVJ/jKmv89PuFyYyzVbzI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzeOqCRA9TVsSAnZWagAAprsP/36OlSIPsMWWK8I9SW1A\nJfNvc51uDVxpiM/CD8VRbnN9dM3tHs0dB5Khv2eXmAaFWDrIJ0sIhd5YUpDo\n4ZSSziKS1qTdg/OWtEMrsT/ToETdK3siwarGMb/9hRKZ0iqeGgW7GGXL+unY\nt2/kid1iwRkef7QAJzOi7AiouRAXj7EbptVaYpiCcdaObuWDPH4DXd9598fi\n6HGywD+OSO7M6obLu7ba1HMzqxw0SQotIBQh2Uw6GER/xQrEwAYuZ5+LHX6P\n5zA5nnekp1OdhGHKcF6GKmLON3+oCah8ueytaxvTXgVmrdSqFu/GeeKW0pme\n/2OgenA9mRzt7DSVoJt6as47a2XUYLO6dx8WWLYBBsXF975LTBo6XlTJ0CqI\nGaFlZ0Q+ZYc4pO2ca9j2ifuik1uWWG3lV7kgiT2Kf5zCzYOHO+7FDWL5XMD0\nPfHwsot1ymUbo74JZ7za3pdwVnhyVTqwPyaA9PYAWk90ePpLBQJFxJVoFgxF\nEqECP3FjOfhi8ma63xLc65ogDeBmCv4y9Gso1fnEl1YMIuqdgO0p371HhPdM\n7wWPM7NTuBOU11jHIzj4wwQIVfFOBzVQCtZiw4/leEI15LfzUcNm7RRr7HPn\n/30r5QtAsoSr5MdO8I0szXiorgMcxEWBOhsNo3NELD3q03AavJyu7PJ8gr9B\n0xjm\r\n=oAV2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.525989b5d.0","@material/base":"5.0.0-canary.525989b5d.0","@material/theme":"5.0.0-canary.525989b5d.0","@material/animation":"5.0.0-canary.525989b5d.0","@material/typography":"5.0.0-canary.525989b5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.525989b5d.0_1573774250591_0.7559275190349306","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/floating-label","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"4a398b603fbfc1fc29da35c0ace92b0ea9be3fa6","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.7084b403a.0.tgz","fileCount":30,"integrity":"sha512-oCYWwVrTWwCu34h4vds1fVEdgtI8G9yKzzC/MeAWZ303lgEI4AO+1KhO+QXrHIPat6IbRgL7zi4XhhsnEKPjdg==","signatures":[{"sig":"MEUCIQCVccztzCl6C16RWl9e8t9uhuoI6xQ/zCJei0T5658UNQIgM8SHctNs5JIZAL8eUQ0REPVBedOJ/nsg6cCLwzd1dWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfn0CRA9TVsSAnZWagAAcskP+QG2T8J7irmpoJGrmPxz\njgxvtY/qEYLfVBBPLbQg/EuRoBPm6a0ynRNpdtf613FdOJcAUyNznzOulOz2\nMSMAlT6YydbcrQCS9rcybMhB7ujuHnrebXBPZ6RNndvDS/+W9fUGJ6MSnaot\nP9AF6T4Mvy9HN80RM4yeFspZ0NnxDVPdioRvI/yOST5NrqTIGVawVdgRNCSr\n/tfWTECPCQWniX75kR4zF0rqDdA0nVHnxbi24Tnue4Zy0xc4NshmBkokKhOs\nJjF/XNJt4AeRhibyAZWBhfFCDV9kmcrLoENnxyRxhV1xmr0XIlCSU+Icdvzb\nqqjOqGFwN44CcLYuSadEdJmciUfGz3zmob4x9S6M+cNgh0KQyZDYCH+E/SHm\nPdJrJsLT9yq4ZgraoWJRnHddNu77JtAfvB9wW1+99OPeipCHhzFxjYCI37FS\npx7N+hMbF1M5SWjZAcS5DwLesmn4b/AUd/6s6mXNtj/xKvacl7KnuRTl8i4w\nz5amkGXsLuE8VfaUfEF0nXXsoMUv8ie5O1Htn8nhQ0Spc9frNqwd5sIkKzpg\njxYEouXzzUDSFBHd4ohu6/f6fiRAZmlH8D5lx1pAco0QZIsyoi7vX595UvG2\nMEP1VNTvDsnTitOGbnqRwJdZULb+ubAT6wOiWRWkKdagZn4aX0ywwfxVvQic\nFW9G\r\n=+38W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7084b403a.0","@material/base":"5.0.0-canary.7084b403a.0","@material/theme":"5.0.0-canary.7084b403a.0","@material/animation":"5.0.0-canary.7084b403a.0","@material/typography":"5.0.0-canary.7084b403a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.7084b403a.0_1573779956286_0.7815864193137168","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/floating-label","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"90ffe146543a01506c85531706357d658d9a1fe6","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.3cbee6dac.0.tgz","fileCount":30,"integrity":"sha512-0aC1DsAMF1Y3lLGfBs4LZylPsL9uqfk0z0FTETmOunQrmhL4ElR0t2acFxtcis+8gKW4bEKRaYFDIjE1MXDEwQ==","signatures":[{"sig":"MEQCIFMdjX3f8W/oLZ0TQPIjcLMEruXq6SUtaOxwnMIvaB7pAiARefBDOOxQRI1lj0HDst+9DuJ57PH3agcmqeoaCXE18Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyeSCRA9TVsSAnZWagAA8/YP+QBIALZ5KZGEwlIedBYS\nA7TU0KIY0QtiS6GoBFrppSJ0ZppceQhI0fs/SuNbBGwWui8rW6hNV4Zx7hls\nZaj5GrhOCgH3VInp+bVuXXJHQ/zRZ3RFaPd6MZ1qqXjnnzNxbG2NO0XCsaSi\neTJ8/or474ac7V7poNDnOzw8IfrccNYN4Htlox5mUCsS9PQZ+DVWHe36398i\ndUwS6OWDB62afrhsgMbdSGTBq7Xljh6EjB42e3LHSMxwZ/2lMHxK309viuue\nQkHR2t9t0oLNi9Twub6ZBfHKcvc5dDFRYFjqEokwWaka2vCfi0wSfeFzrYV9\nl/+Sgd8R/l4zvL8xyuLhcRVXGYFlZE2As6UbuLKDvY33/Pal3Sy6wXalsy95\ng6UOk5ZovsFH4GQQcyV1hHkh0uYb4w2aCUu/vk5nsUBuGSo4y23nMK0rMKsa\nDP1rJggiFpzcFKBQ3h48RufE13cbNtNLYleizeY6TvS3WP3cnU4NRHprF3oE\ne13J74D1zTbobBc9mij2Yvb5OyRRIRdVSC8bUsHEBG4iQVr32JQpD/rcrXEz\neggZct1NuClBWcppNpdigy1kgTmFqgKP62nVyx6x0GLDFgSu1EMYRfskf1NC\nbC4Yucep4fG6Iu9VbOp9xxrY1wiBX2CYealn7by/6qM7PhPdqFp6agSNrE2Y\ntHPn\r\n=or4f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3cbee6dac.0","@material/base":"5.0.0-canary.3cbee6dac.0","@material/theme":"5.0.0-canary.3cbee6dac.0","@material/animation":"5.0.0-canary.3cbee6dac.0","@material/typography":"5.0.0-canary.3cbee6dac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.3cbee6dac.0_1573857169888_0.9378799319916669","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/floating-label","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"3b75fbfd2172bce3e19b3df9bb81b03c332b369b","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.591a6ad44.0.tgz","fileCount":30,"integrity":"sha512-r4prkrsq7+G9hdzLfRIFgnOSeJMYl2Oo0id8NwEoMz/aUNQ3ZgyYge98FuK3/SuveiAezlF7k7IEpSmL5LccPQ==","signatures":[{"sig":"MEYCIQDuQ5lhiieC6tiswgnJ8m8DHKovmBG2sPjZJbovhKpq9QIhAK+rSCu7eWKfmA5LBYWOx3+c5sa7UEeowaNEQH12ZdS9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y3PCRA9TVsSAnZWagAApOoP/048BCqU8evz8tJeQxS0\n6UPXHA0ay8qNuDh/Bq5MLqaRDjaBq9o0YH/2JYxRR0V/2HGP3qpNuOpN7uFZ\nAk4B2aJTOXzEBCdHcQATwPyBmwpigXLoc37k1h9zSAa/BBA8es5W2iZGLQrb\nUF24idCIW1GveWI7i0EAYkTNt9oqQzzC15Z1N2GVbxTqD/XLHzvv6EWN8aqv\npB+rFOXp0CcHe1Qy431/futvGGvvb2s+aoAY6ZdI61Pny/RwUUl3VvoPASlC\nLajObNpiScHAycC9cHXe60MOHMSXg/9DwReJuQTkUMYE5PQ5HS3QlF0i8Jzs\nbYR37TmGFtu1xgn+qFe0JxAieC/rdGKcCW//qjAzsX3Gj/HmXNc/yv98UepV\nWrT/pgLBv/BPHXJY/uLq92eqUCVn48MFOWeNgHofIgLW1tE/ad0YjVAPtbBE\nPV/wGblpur+AMJ65Qvt/n8dZCHGfSOPPhNEzHUO92EfiilclCyS17QxSdklb\nJiTCt0TjIsuutfdUlwGLb8A1/27Bo3zbvwTDJ3mwWhUALRu+/2cS107IY1Tw\nmJIhZ7XMh8e9Eics95Nn5pkE+bS24IZwCRli3diGlkyCARgWjM+DWodrEDbg\nvP4JWKhGuoXutsnT7NrbBoDW0uSFXS1vuVpFI/DtulVSfU9h2vtgvjZbR1NE\nzNO/\r\n=Fb1i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.591a6ad44.0","@material/base":"5.0.0-canary.591a6ad44.0","@material/theme":"5.0.0-canary.591a6ad44.0","@material/animation":"5.0.0-canary.591a6ad44.0","@material/typography":"5.0.0-canary.591a6ad44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.591a6ad44.0_1574120911378_0.5926341849331915","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/floating-label","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"88375032b4878ae4db715a65c2d439e2934dd7e1","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.5729943ba.0.tgz","fileCount":30,"integrity":"sha512-uYRa3Zwdb3XKBbCwZfq9H0ZH2WFMNMw9rsAhuQNsQfRVxUPp9Jwz96BHtOJEHq0/XIX52DM8FvNfQmZaCY+1qw==","signatures":[{"sig":"MEYCIQCuORUu1J6T99Uzzxs3qnEDIN+ih5BgtxDILizduxqUowIhAN81AF6gT4+Ujs0DAdrrq5tWTVIAgflxKX8shKYA68sc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1MzdCRA9TVsSAnZWagAAcz8P/R+TgTkdJsEdDv+WlM5o\nNgtypkwY0l9gcjtSC9c94LTaf0L5CYdqRNhRhNcfXQXz+DCeS9uUmDkyDeFU\n/WZvHdEl6JhSsYRO6kxYzUzMNlFBwKMT/PHC8Djoc8e5098HEUJsLDd5/I/I\nMRKqzoyg4l0GBkwVU1gClgeb50X2Hcw+GQP2uP2ky6+/S0m50KAv8wKkouE5\nR2Y/4depsOvdD+eh5nNqJ70r7ALIJnJZ97+8KB3+V3d+1JDbYk6plgvOgkkJ\nbdb/KgfmbbJZ7XYdTKGco/spflSG07pOD2lUpHJ3AUz/cSwG1BR+WcLqrhJt\nRuMV3jppDgDMMYU1tgkG4mcQDqPym8Fah1Jm1ZUFehILAN2XGppAffmFS88+\nPOU9dAQ1dhpJVGzHr14l/3F3l78XcNKFdq+5wKnkokEwBjtDJA3DnZOG2LIL\nyXhHoEV1X/mmaaaBrW/p6lcWiE7wTDRJwI11zbNcrUDLiwOzabvrzCd0tspZ\nQw/33nqTDU+dgtbUIq+5NP2ndpvPINMJ6W2p8DvCQmsRPEx4rIXlgPZTVAdv\nWxmdB5jNn1V0f+flqwH5JTcO26BPR8LRNqJnfqwBg6XcCFCkY/q4fB8o365W\nd7JuZ0eGzwuIauV+5KdOahYXD67SfyjpB1DX8QabMblOFjO9wmn+Jg7N7rGa\nJuQa\r\n=F2cO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5729943ba.0","@material/base":"5.0.0-canary.5729943ba.0","@material/theme":"5.0.0-canary.5729943ba.0","@material/animation":"5.0.0-canary.5729943ba.0","@material/typography":"5.0.0-canary.5729943ba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.5729943ba.0_1574227165288_0.6739014385138318","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/floating-label","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"7fabd486850b7388e775c9f5a3113c258abbdc52","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.e89750dc7.0.tgz","fileCount":30,"integrity":"sha512-cJD8ZDPnAm17PIvbsyZv3GGNH49alH4HoeSLH7SN2LUW9mRqQq+84J8bzW2KYVWP26stKE2EB1CbdZnmwTs2hg==","signatures":[{"sig":"MEYCIQCYSKmUm1FkKT/wfRNYhO9GpXBzChaKb476mpzQBbNBOgIhANdEFOKrTUq7MEeVtypz6G9JRegjwSm0MmL1dTiupNyv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3drvCRA9TVsSAnZWagAAeK0P/2pMGY8fP+gQp7pcFiin\n98bjw6ASl/bujEmptgypXBK2Iex40MMzS2v/h+kmBM7lQOP4/WWneiYx04nh\nWZkWITTRt4L+u7jOzQY2TsnkexSt1fisV7xavnSQLMldwjP4tNXDCTQ6aW33\nSa+JfD3r7/r7e/KLUsMuva92HEw+j+M5Nlsdth58QofXabwzchgTNo3mgOY4\ntMozX0iKh9cjjhRoEq1e02mgc+han1CBHlVWUvTwuHe3WKcMCjukLhGWtq0/\nWoMoXp6kJctH/YUPkw44pBWGOB1WseQzXFcFMrMQ3IKRUTGNYmS/I9pPZsfK\nfPkRUnb6RuJQ0eDSLlJro5PtyBYmx3EmVKQdfDb2sWHjOJPUW7jS3x820ksC\nkJmev6kV5saLQQ088BHETM91w3ouY2y7QSyAAwJwACqyMo4ZYGw3M4bW5mHh\nJ8C++DUUBeR/0tbRkh440KUnrVwVsfmab0qikTXWhtnrpfJ0V/8dy+DVRWlS\nwWI4fVqUzP3UQLA90qFfioRvZLXf6h/wWfmo1E7tg+usI66eZeTb11hOoLW2\nbzzLv7/AqFe2ABnSEwTAz0ATG+MeJ0oSZERLoI/3Mm/Yp6tYL94Bvw2Zyhp/\n70a/WomWKsYXFfPXf/RELCLT6JXDYlGMkbWn78cr2P9Inskm+fHeKHy0Ggm0\nO3MY\r\n=cz3P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.e89750dc7.0","@material/base":"5.0.0-canary.e89750dc7.0","@material/theme":"5.0.0-canary.e89750dc7.0","@material/animation":"5.0.0-canary.e89750dc7.0","@material/typography":"5.0.0-canary.e89750dc7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.e89750dc7.0_1574820590755_0.85230278699182","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/floating-label","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"0cde103be640b338773fb01038ce05dc88f734fc","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.3e560b33a.0.tgz","fileCount":30,"integrity":"sha512-B6F4JO2ReoqfNVTK3FBwkdbdJG4otLcHWj5UsEDuThgRDJaZ+vbWODBCd4Vw5EZ3SxvZmjIarhIK5GW+owz5cA==","signatures":[{"sig":"MEUCIQDfZu1w2LTFVqDWxgpN5UaHjTFPqkZXy8IbN/EFzifoEAIgfr45hO59pgVDVnSF4KM/4dDtFj/AVGTpAeob9UoDSyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsbCRA9TVsSAnZWagAAp4kP/2vYVh3nOlRGCNu2E9Gy\ngEGaSbqu3RbTtVAnxmHT4zme1bueTjtN+wiyb3GGCvQEtg0wQAiWXS5LuegO\nJ/jzMax2D3exsqTIi62iSWUTVYBKfaC/JfXNcuYyED4/O4k/tnZXJgyR/omn\nswRmC19UFMJiYuw3UJ6x3K3GJ7t6pntIgU7BA+6/TLHr2XOBszWgd69tBICD\nH4Bqe/Mp3/Xj5/jyi+gekU09y6E0j9M17f5WFiOzrBRNFPfFsfxHmr1SGNP3\nFInTPv71EJAAGW1viaIl8JQFvHUzBm3OUB8szkalbPgWIKyJ2rskQ6+nCYAq\nRKcLFSxN0YLWlLtlR7VbZDAYlHN/8ZrRYgZgzB9Ic0dU0oAtfok76M3BumJc\npPkn8Bs4o3rHgbQ1Lc9KHsZdBmZAcEg5HAInVsIYdtpfCGTlw8c+SqdMr/7R\nT4nOLbKxnXhqt8AKjqY+hbWIVPv5Ur2AITeW+Yn22AYY4v4fQoSFaev3v6N8\nU49TWdS4GDzV78ruO8MffXv1OYWZCzq9+RnXi1XFLdCrPvZyz14kLjnXYW3x\nvADbMPyg1NdpdofMyl1ikrxdGpG/dG8l9uslSnAh8tsHvvi0bUAcF4sUOrJf\n6jwxR6QfvxFNKYx9XPqf8d39eEf5WQJDcs5A7IUqRr5Dk1+UBJHPs5puxKOi\nPciZ\r\n=sx/6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3e560b33a.0","@material/base":"5.0.0-canary.3e560b33a.0","@material/theme":"5.0.0-canary.3e560b33a.0","@material/animation":"5.0.0-canary.3e560b33a.0","@material/typography":"5.0.0-canary.3e560b33a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.3e560b33a.0_1574820634728_0.3274888285970825","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/floating-label","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"43dda75fceef0ad4d0b04bf57e1595b71d5a6a24","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":30,"integrity":"sha512-3rd34B12SAIW+eIRGYAcoRdT2/ozvsiTUhMcmiLOf4kptFottxiTxJ5R5i+iQQ1T3vebTOzFs3NH5RiWwd7xGw==","signatures":[{"sig":"MEQCID1dMkBykSQiIsdfs1De7XDPEe6kpDG9AcdQmTlh0aJRAiBRCUfS/UD+gZWJ+6wwwiVmbnpb6qW6NEx/8m7GY2Qrag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsvCRA9TVsSAnZWagAAviEP/1k0dDYRlN//p/f287fI\nm4ycxbSIwzXy2T1EzyxmUwgeaGVlM2ICPulRoJ5JzdOWLY6LFCY1oR2jDbgL\nh548/crG+IkCm7tthi56CQhQ77dMb4NityBEwL7EJ6bM8COBxihiLmY4ynzU\nZnOyn7D/Qfg10aBJp2f7EIakYatwYkcZBjZvQ4lPu8/5nl9LS/YT4WJ9RtYt\nn/a63jQaFX8sMZrs855RRfbWet2zireN0VD8tz1TD466T5xGu6ZFaEh/lHkG\n4PQSCPcPGx3rtKwo52Lpyy+I35LUaJnRLA2Jx+5iHT2daSZUdumvk+F4Qxem\nv8H6LHNg2qVC+ASSvXNxoWvXFq5bA8QLdAAJvfkOluIuRGuOwOD5Spd1UnSI\nP23+8Lbk9NII0clA7jcgGJDryahhApQ92+lFbpaisLJSF07ZMwauuLtQbDn4\n1GMLfC8Ff7ZgAAlIz8hStYNcNcj+CuWqUmzrbJxs1xOcMvl31REduy6W/vB4\nlrZGsreEBUv6n7fS4qw2lkCMZvRUf2jdbmLthCfiy2mHHXJOD3Vp0LFs12uW\nrPFhaUWfEQbNoK8BPJO7HEV7jhanKClX5ONXCtMSMzArCy9Sv+kpmHzjQN0p\nktIPQfaoTynO524nady4AZk71qkV/3J3anwaBFI+rIXaIQEJ5B/Vfcb74kNJ\na5rq\r\n=RleD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7fd17ce5e.0","@material/base":"5.0.0-canary.7fd17ce5e.0","@material/theme":"5.0.0-canary.7fd17ce5e.0","@material/animation":"5.0.0-canary.7fd17ce5e.0","@material/typography":"5.0.0-canary.7fd17ce5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.7fd17ce5e.0_1574820655384_0.23608018398648478","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/floating-label","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"b653d635eee19110e7f0e514182b5a040a08ac60","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.ec729683b.0.tgz","fileCount":30,"integrity":"sha512-SDULenGSZcOs17fRYQMMUUuOifkUlO0UePNhbuJvRNQu3DB7nfJHDpOzzBeS9c++aGWnowA5Qxr514agsKm8gg==","signatures":[{"sig":"MEYCIQDzDtWnr3nS4xP5Wm4cZSGDr8QMsHLfmVy2WgyeNenPWQIhAOei4nI3PUg8c20+wCd0eI1CH8rI+nRRO9YmxXR2ZJMl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pxTCRA9TVsSAnZWagAAhqwQAJfNv3N7/7nLhwMkoOsY\nFO88z4vUGg3M3vGyNkWTBxi5CSOqxsa8wHe2DPkuFwV70j0oJc5LlwN2mjgM\nsx2Kn/AKxTCxHt8FV8lsg7BuxSXetAs31+7gbEJPDAE2D6OhGS3yqQDzAYUz\nFdAbLtXuYipthPH7ILskhcKIBQ8JEwMTm2UJf/jmUXvMu8kjuvlGpWiVTDYR\nGqCYgSdnKMweNo0wqyNoxOpN1FoXOops/QeY3OexsJN7FIOjYWieLXapM/bw\nJZAMsakGAbD/8GLsrwnMbYOJz/P6cR954WddFdPXwGuvGM2E1eVwHw5cO/sW\nvuH4DU/nRifjktjVbgLCbHTMXStwO7Wwvx+dAogQwTJEdg2l81BFLn+0w3zk\n23X2A8jCRWdR0IA9pBQMecUg5LhqR1mIdT3utC4hmHSMIhKB+qiBYD/3f38A\nKGGYbWm7B9KIXvbXxAYaAoYlj0AVXr6iZ96kR0plsDIF2C4ilGnnhkRYaozj\nJU/IKrx77AhZYQNeaAVsCK7MExlert0BABn6zEz9d7lnfS19V975bi1w2KQ+\ntg8Fx1KWz8EXsC50kX5xNU2ndTT0tTpeZ595T9nOvCFjnvmHUj+id3q3nVW3\nRLj4PGUWfEF4Fje+qng2gECG94j9sMu6w2JWxPMK5hGBkwBf/1Sp8HlmNy5C\nZ9QO\r\n=feQ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ec729683b.0","@material/base":"5.0.0-canary.ec729683b.0","@material/theme":"5.0.0-canary.ec729683b.0","@material/animation":"5.0.0-canary.ec729683b.0","@material/typography":"5.0.0-canary.ec729683b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.ec729683b.0_1574870098653_0.9323253961809592","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/floating-label","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"edf92d8701e15800a78b5b14e2ced2d4f964107c","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":30,"integrity":"sha512-4fKY2LzZ6sE0NoeCTVX0jZk9aSAS3VJUDgP/m08MbO8qK2dPLKnhm3Bc89jUZhzbuGm2PcGdrpxgPZ1vfCzTPQ==","signatures":[{"sig":"MEUCIQCNZumwGaHfJKD6YwSV+0YqIwxyGnpKEdyeyHg6Ce8H6AIgaZnGx+yjl3WvzhUvuc4MA+GzULQ5ElvV2gJZ1s4VJZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3sufCRA9TVsSAnZWagAAb9oQAKJCDSev/FIRjk1W1Sub\nlH5bii4qZaoSaJ++MEfBYYrVL4zSqsZ278c1zC/S6AaiQa6f+iL51ga64z3R\nWKJ+4l3BT82PsCcY9IUptp+jM5JDDvdOb0MQaTwelScLgu1yx394wcHp2303\n46SKuLI9fvWL5YMHQMnjjQ0BqpXErB7BldfvyyCvoBzx7j1l+RhcTJjS9PfP\nHgm5SJAO06bj9nkbb3yTd90ianq6Yor3BY/4lVarMR2IXuNXMTLgDCfEAV74\nfuY8NEUY2f9nbQdcBVzcNpKVcsFqB/efM9I4T4Ezdl+WbnUghK7Gq/93hRLh\nfFkT2YcQrzTP37NMmh1M+OXB4iq24p6BWDKoN8zts/CU+aUzPasPUOIxsP8w\nCYHBzFZR0t9sNOL8pfcr/RKUQG07c/QGF2/xOAS2W5AhMcelYGhGPGIqAZ5+\n+qNWMN6xBEIrGAv0bfro6N9U5jU8kbLgWSPslMoq6dkHQvlgtI2zpRwomXzM\nKRPdfOFhSEjh+OO4t2b1WjfuDfumVqMZmf8VdlgI4RhtL9IrHHOiT+qIdh9D\ntrGz5r1/r5WorzhPnMQMG2mRfvnJCm7vA6g9gCRw9oZGn5BIDoiDkkTtbCT3\naSVwjcoiTxG5rPCaQwDwpcZe6M0j+NoqGoMPAOtpTvg5kQLUm1s5Kaa+rvPY\nLl6z\r\n=hDnB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b8bc4a26e.0","@material/base":"5.0.0-canary.b8bc4a26e.0","@material/theme":"5.0.0-canary.b8bc4a26e.0","@material/animation":"5.0.0-canary.b8bc4a26e.0","@material/typography":"5.0.0-canary.b8bc4a26e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.b8bc4a26e.0_1574882206747_0.0503839498328047","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/floating-label","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"53c0becb035ed61ee2ba575abb07033cf41a9179","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.f978109c3.0.tgz","fileCount":30,"integrity":"sha512-16kWPujN3ungy4Ju+aOF9oi7ryNT2cnf1KRsIqzAlEwt88oStMXyuJ31HlSUL/PBttfoMEfAMO6ZCANSlH/kUw==","signatures":[{"sig":"MEQCIEfgMZxGwXxz/1W7UViqme3XWpoeTc4QFFyz/KL98gSeAiAEHisCLm0cgt8GeExMuJAXfiYRaqlBBFwcSbdp16ap7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5UTLCRA9TVsSAnZWagAABG8P/jB3acAko3WOWTcOHU/s\neChdtRUFdaMPjrEq+NTX5Mbgri9taGc5FlC6SgjIcoYvR3pBuqDuMHd3FCh3\nhxgz3eiJ1Br7ZWlO0H9BOAcgX6tNonLKvnuXGY9tbCO/xB0HePKJzssrK1vO\nTUypK3oNpgHNsIW40mP5ulS3mfGEIDOw7fJPIxGsULL6ek6SD8ZBrdBFxI0i\nw4FEM1/Q9J+iq6fSjOqldH+tNkvTVJVdir1rYWogQdY8mC+X7hADrG0flWxF\nAeRqSUDBYOYrQ1rvDIpTd8oQasJkwWHCRT09bRMgDpxWsOfqglXjljEV4lVf\nLMgi9mAMVkmfLu27S0g4/YumbiKR6thN8MOR5KMOPfUjj454Bkm8O23ZRBIL\nLsULOjlcFz9NJ+pbw394eliMAvJcevaOVL0jS+Bpc1wsBdiL9VXG/DdtUNeQ\nRT9AVaDyGOxj0EcikRk3+aOPOWKkk2TAzrp9ToY08LE5oUE60jW+5gnwOejg\nujkLXaVvZNZYd26ox5c8T5oRrIBTqB0eoS4AATD/biqVm5sF6c4UH3rujEfW\n/d2RRAvpK7U6g02kLCD2JEncQ3IUeGFvJYvEEZzQJHbQ5rXFMrF5s7JTIzEv\nXD3RlDCqr2hMQMBMnXdCHm/9KO8ss8JEe22qe55IQ5eVN35JHpmJyb+OjtKK\nB08+\r\n=gJl9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f978109c3.0","@material/base":"5.0.0-canary.f978109c3.0","@material/theme":"5.0.0-canary.f978109c3.0","@material/animation":"5.0.0-canary.f978109c3.0","@material/typography":"5.0.0-canary.f978109c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.f978109c3.0_1575306443594_0.5663604537926497","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/floating-label","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"d91b8c0fa15da27e3f9267c5555c8964f3238bb0","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.ad9dfe706.0.tgz","fileCount":30,"integrity":"sha512-SmICyJq2XdCLJ8fAzMZEEr0Sb3FnGp8ejobrRUN+diGs+HeAnJe8TWSOYQBzQeEIYeEWl3f7ot59PMelYtZ+4A==","signatures":[{"sig":"MEUCIQCjMPtlkmsXD0OxVNM4/IPy2Diuf4FbWc8QLHQz2MBjmAIgAgoxk0JsKvBZNGwpKpnKqjzEpYmuFw5tYSjp39yZEOI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u0tCRA9TVsSAnZWagAA7HcP/1U7BCIA+56ZnHNdgtr6\nNOSVCI7gNmdW60GS/GD18GkhQtVvg+6dK3aHvVdzMRe3MwqjEctUn3//exdm\nppF8XzYpxPEGXE/q3Zd+qyS/B3wz//67+6NAOes7M3lhyzkNRfkKTyzpeZUV\nEAzyZ62s/trmNMyG9IpoNrJsfYzCcZGD3EJIH0iE8YWuyNtqJQsB8YtTW6jE\nNGuFGL+MJeqefp+Hm3S2J4VFcumDbaPwIveTqgD8lNb5K7NFAtrarf8+S17Q\nyNLf6qbsU0G2QZWoTUNpujuUzEbi+W7o83oH9EXCWJu7bwJQFGyC+1osIFeq\nEzx/rsCjkmvRbBB/NYFThmbjLuLxHJpYwFz8qEN+FYChku7qHhDRjn88KvC8\n3XiflQ1DLZ4LETPcLt+bA5DvBc43/cUJbWnLZ1mmwBv7FIcbcgFaPG05gcEg\nk8RndW/FYcer4gr8hUlhgPxi/8QSncud9lN5WQESXt2IlTF1S3+mh6GSnYXZ\nAibA0bJ/9anhgLaZFYHDHMWhOlAMIuQFexKo8eJhv/5j50vxv6jAbg8WkmaT\nccVuecjQyMre4QktLOyvUEkR55EIY/711h4ysiuCbOo++OS1Z/NMlz3W+z1v\n2XljfqGodg93goWTwpUGguHb3D3j1hsBrRq1k5J9WwlEeyeI6jZiyZBLQnIT\n0I46\r\n=xw02\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ad9dfe706.0","@material/base":"5.0.0-canary.ad9dfe706.0","@material/theme":"5.0.0-canary.ad9dfe706.0","@material/animation":"5.0.0-canary.ad9dfe706.0","@material/typography":"5.0.0-canary.ad9dfe706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.ad9dfe706.0_1575415085197_0.13818521322686772","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/floating-label","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"098acae24960f4ebea247ca1b8a7903ed819c75e","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.5e45d77f3.0.tgz","fileCount":30,"integrity":"sha512-zEveRzxe+tjhw5SWdWM+iBhOgnsIogTT5wrDsy38Tv4wcZUUDUIjT2HCdj3TfYElLeffr7uFpZw2RZ5HqU2LsQ==","signatures":[{"sig":"MEQCIHyPKNYi37sShUavgmAgCcTC/KG/a9pHHfg3x7Tip06aAiAL204gu5iS0Y3JgAAjEk1fbU9BF7DcDI35f8ST5vuCMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u1zCRA9TVsSAnZWagAAPSoP/RV8DG9aoUZT8xowBv0a\nLyQD4b39tnkjUZwMzfVjE0U1QYeIPG6zDyYHmOQdS5YC6RZK9MrgFuE2OF4z\nrPSH857tjIakdNcR2Xfy68bc57GMsMqJJMLAQcsJomZ7cf5cTXBdjpVG4FT3\nrJsJwVkYZjPJX0TDQYEzct0h4aN9vhrDmVLpPbc1t5ZprY1VY8XqKHWkZh6Y\n7ncDWjx/BRRjKaATeez6eUvY8ONObbxQtq+PZYYNmTEpmsqfsvngx8LYJbK+\n0X20xr3wR5zstTgAwWKPGaWhLsAhmFvb4maMKZ/NGwuxjQmfbfpBAwCFi5Y3\nzMdfrEw0XgmGIC30cDcX3gO3vNNno2f45gRSTNHOPu+hxkelcbzEOTPnswPk\nXSPw8au9jQLy3Ludq2vr86zdAnZXZmdqdO9duCu8TaaAMc47vNS+8viDqNyZ\nm/8SFRanueEne2IPkAcli7mFZmSIBMOcmehDkO2zleuIEh3Il7ZKzX36a2n7\nxvFrVXh965uvOMQXUO1Eoz7OjrQfknIWpgfv6S0thFhRP7FZtkLAeivywuR/\n/FXfaLwQ3XYs91VQ7Uk3+JpLLqWVSzncH5EG5R2V/9P2hwQFk5IuNcpk8H9z\nrgzyfUik5RVnxU9y0fLpZpwYpcw6vNOuN938dm0Hd2buZZP8y9BN0+mXc5XW\nSupf\r\n=z14t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5e45d77f3.0","@material/base":"5.0.0-canary.5e45d77f3.0","@material/theme":"5.0.0-canary.5e45d77f3.0","@material/animation":"5.0.0-canary.5e45d77f3.0","@material/typography":"5.0.0-canary.5e45d77f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.5e45d77f3.0_1575415155440_0.22905946367728736","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/floating-label","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"38db7dbcc4f417b703c577130e40d3c3a4c8faa3","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":30,"integrity":"sha512-Zo/+5AhA9lLHFAYeQqDj/6QmZ5bC0N2QdNTb05POguD69D0HBaNJGRLdPJIRn5IubvageLTlCFUDT9Lo58OZcw==","signatures":[{"sig":"MEYCIQDmCFaQM4XHy1Lk8Algq6mVGqOoEYYh4q+9opxDCs4EfgIhAJSkZBPzXgFNeOSKnLCLKVgnnsfMtk9Cw33K0MKfTQsy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u2zCRA9TVsSAnZWagAAwWYP/iQoB8VRZS1prjoR9P9J\nA5vQuxVkFXpy2oVkbsKMbn6+Yw5gz8qRuHUkmD+2GPJWWUSyywszk8hmKe/a\nJMQOj62UrUDHY+yTjNXaMb81ypn2YIkGNmx+oiVopha1ohBvQcuLDifcHFio\nwVl/QOnKsRnHto3cQIf419PGe2FKjt3gJY3PYqKCgcQrCt0oR3GEAD57w25M\n/6M8Cs2ri252WYRxxFSelka6MJKrexD3LUzK0vtbwbfoSIecxg9yERbpzOEP\nvmuFjJPcdhzTv5P7kJZVMCoRNa4PvHxi7uQZvI76h26qKvLo+j2uAkDiE82B\nf62cNcL06rUpu/Jv5WHDGef+nOpDVaTXWWxU4XK7Tp7cjXknkP+NoDGSljRZ\n8wSLS39Mp6UfvINTp/L2OhvmMaoKYeKeaCfeEADyg3wMWX4AdowTptajbyxa\nQQk7apG097cRaoCXTakaEY1CpNjSRG/9sdBNHObhiqfCVOVGUvERXI8V2Dsj\na006MRghmICAJhR5Rv59CgQvoYqES/8K/QVqyr09kY3+wd+BYku7gLZrbkiY\nbfLN10goHK4RMvPmGKgTDwEtaOkpzTxDEPzcJ4oJyaWqqjCxWHFOduJGvggp\nBNEAcjY4P9gUB5KynsE2hZxmX2d/eQytdx/R2DYQyabStk5FBc8wFeJBv80+\nu2Fv\r\n=6VEa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d10e8cdf3.0","@material/base":"5.0.0-canary.d10e8cdf3.0","@material/theme":"5.0.0-canary.d10e8cdf3.0","@material/animation":"5.0.0-canary.d10e8cdf3.0","@material/typography":"5.0.0-canary.d10e8cdf3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.d10e8cdf3.0_1575415219175_0.9847998058073202","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/floating-label","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"5339cecc2b3d0b0027c733694125cfb4106ac604","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":30,"integrity":"sha512-09b3pq8WunPjv817fq3uBLVeMBDHo5piFIcb8gxpKW7mwcnrhjq1B4EHU58f7UhSVM9ycMWjUJyFhvq7IKOMHA==","signatures":[{"sig":"MEUCIQCv1UDYqFmLszs5u1SoeNgEJUpQjoHC48jBVXJ9O6ep5AIgd/G9IftNWW9VHZoIxrao1ui/WSPBKV8QD6hAVfr8RsI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vXZCRA9TVsSAnZWagAAgYIQAI5aUbEIgrtw/J/a301J\nwFQ5emdcbrNyIwhOP3lSX6fZB0bcU3Lk9VeXQRacdapccA23ae/xaqRxioI0\n5StZFDGeOFOb4akXe03anODhdiuPLZeNNdV8NnlNHNGvkRbkxyYPh/TB1Jjf\n7o4Ziy4q/v6H11NDBybsiqTDaN3RHlz4Z3g0fZzIX0ZaGfUIxBPZMpIAMR3S\npdnq22s8C+KXySEWvKYDO/qdrpwFsmP6GMEqIRwuY0PA+hR7UcpWsf0w4gwJ\n4PJV3C8DenqyT4M+DaxbJ109MXudkKBaMGljWvIMhw249VbeYOOYx4mJ0HUD\n6BEhFCkh9hQphFNMoDuhVpRGdSPUIJDqs/n716b5bGx7/YRe0SN9hz+dLgQl\nYCOUBGWhTbXnd/MigChA0vQU3evekj+/oSCN7nQmsMr5GN1g80Oca4KBe9Wu\n7GPG09c3TuXcqYgs8gz9HBlJrNisqNDG8BupWxYk7VoYSW16/nMYq4uTNrji\ngUK9Wsocjf+3ZtoYjRlhnupnWkMaLD6a6Ban6ZoR8I+S7pnOd3JL38X5i2gu\nl5p1EKf3LYH5BLnaJ/tOcmRb3QuUmDNHf/lV3xrMTNjWneKXUfuiC2fz+rhN\nvoa+wrYh/dUCQSmVJDbCTjH6L1NwcW6nPL6M3/fwORfo6bEhlf+SgdBNCo1v\nRsDW\r\n=fsWC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a5dbd8a2a.0","@material/base":"5.0.0-canary.a5dbd8a2a.0","@material/theme":"5.0.0-canary.a5dbd8a2a.0","@material/animation":"5.0.0-canary.a5dbd8a2a.0","@material/typography":"5.0.0-canary.a5dbd8a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.a5dbd8a2a.0_1575417304909_0.6458246687618288","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/floating-label","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"540681a66c1853284699b56f05619de5aaa18714","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.ba879b68b.0.tgz","fileCount":30,"integrity":"sha512-fCJA6fR8FLj9449GCidtjwVV39EqyWmOT43CmhXsYxwiXDM0N8wM4pVXwU1VE7hpabqnqUp/n1S7gwtCTMNJ1A==","signatures":[{"sig":"MEUCIQCY4gns6mEwVLYzcSbz+hD9VSA02chwp6iROWTXLgqASAIgNQ93/wj7dpEwfpW1cP+EKfHotYNhwHPkuqrl8C7i4ts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BWVCRA9TVsSAnZWagAA57MQAIhL+lF8Y0vSOe/1jv4O\ncZ4J/FR+WpmJFMYit1xh9hjecC4tNESRkfPsoiAgy81gnPtUBNFBNwmLanac\na8eDWCc8DSXwNGHuWtmKGH7q4SIVfSwYf8MLmWAEOyWtmMegRXbZveTNdHQb\nXZsd1AW1fvfGRX1Cu7+e0oDh1VVgaugVkB2+YFm4wpWqTlsCkr+juFIHjTIr\nOcvKCytfwc5Fdho8U+YoakDyep7QDqEdgHXHKu0xDFi7jTBDP0baAIfrZSjc\nwsh9SK95GQXTnbnWJmBBWF04mlKgpMX+Opmi0o1NugdWfE1NlKzhDMPdq2K2\ni5873flhHWpPAkGfabz8vF71j9cvYDksuvnrPjh91IqOF+w59rpEDiKgjX9z\n9xSYhpz0gaFchTYwWsRuNtYmJk4/V3qhjJrKh4gkcnXFPvhdVG+gSStnnGvU\npkX0BwrbuNUNDlGKDqJy2EAwVsXMd6XaGKOxV0XbnReH1dewOaV9Inglqm4M\nZzwAa/GepfJ97gHjgVwUz32ziotSXktQ8hHy8Au3Ee9VA75Fjfpw0vUYWFSh\n78noRrLBAKVDN+VmX5WUDnc3ACKU1P5+28jqLLucI7Ip85R8lHmXwJgO9U9R\nD1JHOQjfvO4O9Bte7leOZoqYtlq85o4J4RH3pqegLU3TOqN6+MlT7yIcI7Tq\nszEL\r\n=5zVk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ba879b68b.0","@material/base":"5.0.0-canary.ba879b68b.0","@material/theme":"5.0.0-canary.ba879b68b.0","@material/animation":"5.0.0-canary.ba879b68b.0","@material/typography":"5.0.0-canary.ba879b68b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.ba879b68b.0_1575490964684_0.7630343653210225","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/floating-label","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"fd6a0c7f9c6b144de0cfb37b67f24e03ab7e794a","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.aa0eba489.0.tgz","fileCount":30,"integrity":"sha512-jy4muySHCOAVPhi2RPJmMuenIUCPeZnGWqgRVKKu61M45XgNxUiNwhX10h1aPjvnxHjUeTpHkA5EsDwXkJ7yew==","signatures":[{"sig":"MEUCIGR1cv5yTug0imfN9JqYaXFDhNA39H0mcu7HCIBUqZUyAiEAxeF5DTX6APnGtHm0YoOAu0scEZGxmrD2z9cKWXD4Guw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bXsCRA9TVsSAnZWagAAPgYQAJsIEW50bgg6bZOCAGn9\nRUMazTHxvFFEiKNzJfbJXo7pZKF+rjFulGc1+3koGlfsxrDt2UqZrld8lOht\nJg83wzDZO1Fk9M+K9fD74iXTdH3HxCNA5ZrG5cjchrU7SyRZMpv6RG8eenWi\nwXsNNdn8lKjvpJZUwtTKZ2GssGvqOAZ+togJ8S9ZTFKJh0XICc1Szqr8Gb9B\nectHGihsODcaVWTAqze/W7CLGMdJ4D3drTNrWtXDAYwVACPlHuENkToGnI4Y\nmz1dY4g9OoSFDFXHhbawTB+5U+5QNtI/QUW8e/ATv/0Z3W6FaTEOd4orQYiF\nfqdZNExF//j82c2Bve6kC4ml+ytFqY/0u79GVmQaVFkqXE3WgOxrpD6Fvxq3\n31JGL50gDtAfXq0iISWGPX70oDdK02pUSUkEIUpH6Gp2LqNlDnYxCS7ic3BN\nZ12/kEDOdsLu7SKvJF3AF/EllTRQtXR1PxmF30vXMFrwM9dmsuPX1CTAKfum\nRQHzu2Kw/fYBE91/Pn4+h8TzqiA6GdA1YpNLnt/IUvxPUQ/7pogy3VA3nE4O\nvKy/+H6dNP9o+2VOdivCzHZqQig4U+trvB0NFvYMr3ssenlcgQETkUZcG4Uw\nMh932lDK6otjSacLnrOqguAPxRK1su9mwjH11CgJ7iRgc0V+FJ5wqL/8SugA\nCf6e\r\n=h4aV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.aa0eba489.0","@material/base":"5.0.0-canary.aa0eba489.0","@material/theme":"5.0.0-canary.aa0eba489.0","@material/animation":"5.0.0-canary.aa0eba489.0","@material/typography":"5.0.0-canary.aa0eba489.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.aa0eba489.0_1575597548077_0.7966625427774032","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/floating-label","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"b2d080a71f80229dd55f47c61a3d1a7856c9b561","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.cb7b71a86.0.tgz","fileCount":30,"integrity":"sha512-bQ2zMNnN1EMevTYUjtvQ7NN8/wsiObUrbo2kaVT8L2Tt0uNwn7bkfahZR8E6oyMwWYnP6zd65k5OzWxISZCQ5w==","signatures":[{"sig":"MEYCIQDGE7hS/2CySM6vILCdEcnADEqbqnCeBxu84hTYemN+CQIhAK3UH7HO6gu5vnwX20J4UdWC//qW6qjMGI8C6o8F8ZCD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6uqKCRA9TVsSAnZWagAAkvcP/28khs1QMvfVaiZojI7T\nhikuMoaCn16htr3YAkYyDwxENH7yEHqEV06KzPMU5Y8OYBVhuNZ9Hc+bZsH6\n2LWDe0v88nkpY56VVcQ2rWqKvTmlZ1MhcNx9GOP7TQqdEko9738saNXdgqZc\nHMaFMqP02MDvKF42+b9LAXgYQRfQabtMciVOe+CJvTNzqAjFiPRi2+Dxjpyc\nRWASsPH4hjNQ16M0k9Az8lDwfAglQYnNnh9A8tSO6POBGbvnwzte0sYwkO7g\nF9vg8h6sHT07wX5aDBbmAu1WfWz2mwtWvhcz7jH1k/sXUy/j2y8+h5xO/oZT\nAmUJcX0iV0l+h0hUVcfWkLSY7pqDXhUGSR0DFG3RdrgKoMi6WGt3aqK8xt6M\nQl9tJK49riCdSZ8oD+orHUOQyaPIv33ezZfboYyGmMWJ6hs8KS4DT/GOauUt\nzRniOB5jYsBMgfPD0TLglZqJLr1XbZQI8TSOWB0G9B0Fib7QyRH7ZoHp2h8T\nTjBfo7M5lrpp0wjMTNEJRTzc8HV8eMzdr+07D8V6gzzBatuIoCrG25hCV4lb\nnR/8Mudg1pQXOwBziq/WHGqblFFAsc/fxR7VZ8FN4PiMUaZBKuWHLz8Ws3cZ\nmyIfxCWrC4aL3TyWYhvDM3GQQdpsvpuw0GXsCH79EN07id8nqgGdWvdh1USj\nkGHR\r\n=aaxQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.cb7b71a86.0","@material/base":"5.0.0-canary.cb7b71a86.0","@material/theme":"5.0.0-canary.cb7b71a86.0","@material/animation":"5.0.0-canary.cb7b71a86.0","@material/typography":"5.0.0-canary.cb7b71a86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.cb7b71a86.0_1575676553781_0.24994961331342425","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/floating-label","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"80ae48c19080739988efc61a7dcb0a168cfc1c1d","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.50f110a6c.0.tgz","fileCount":30,"integrity":"sha512-7qDSPepiamBYCF2tFmvZd0yDbsIrT59iB/LOR6gAFBBhZqa91KMw+MhgnFv/6W3OZLyX1PPh65n5CvvjW/4WfA==","signatures":[{"sig":"MEUCIGL+WKS1B2phQB0odB7TjBnTFguFO0LsBfHF6Sw7lBb/AiEAo3E8C3bjs3ZgpZVDDHnPvuYBBCgOGI6rgIeXy7mAkhQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd7874CRA9TVsSAnZWagAAPGAP/0ngEN3c94YFSoR0etxQ\nns7XFAnH0c1jwP/Jk97BU8b85wLjIr/lblgd30exG1FirAjiHfWoFoHXcWZv\nejQqG9DVuwvC9zwNBr9dvrz6gh1mezd1hvNRcFsfSeVQc5FmusoQjXqNHI9g\nUX8aiBaH9t86BSRIBe6WloR5fTtGE7SxJcXfchVKnHqoA9BVt0z5YmGevkrU\nF5XtbSUO5EMWntJ/h+bcCIaYD9WY81r8LdbuGxCNfydXxBGd+dg4DDgxuDjZ\nB7017JmcAg/cC5vYNvEeTuDsvTNaVpXe4lQcVm4bFouCPTWgkb84ITWoMul3\nkCVEtW2MrY895m0oTBx7oqS4DRNCoylMWIQDyZu1LBcH/DJ4ePLA9djisW32\nbrijrCtEicQx4viNv82ZyBfUaIAJ0BUA6T/t/oAPgbcyfFBuNk/xAFWeA4ro\nfv3KkZkIvnWU4HC1dYeDmXAjdtIbC/DVPh2xGVdcI5SfAMbXUA33ws7TIW2I\nvrUqhcwgAUabP9z1YwtsOKDDjRBuA512Huo3EX1SWpTUrQNQEF521a2sbUsw\ndA3xZcUqbZk3Tb8GP3H2KA+T0P/yoYRWQmFU/5UzbZOh+L4681451VqWwvzV\nLOo14I/rA7VAUBG+V9nNQASVstmszT06K+7gkzvVO+F4AC6wDEhxuhNjavLY\n8cZq\r\n=KxoO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.50f110a6c.0","@material/base":"5.0.0-canary.50f110a6c.0","@material/theme":"5.0.0-canary.50f110a6c.0","@material/animation":"5.0.0-canary.50f110a6c.0","@material/typography":"5.0.0-canary.50f110a6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.50f110a6c.0_1575997176398_0.7098805100134729","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/floating-label","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"1ceb8a292c5c232623013ff9b62d38e80b56bc30","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.878a08b7c.0.tgz","fileCount":30,"integrity":"sha512-Qhz6M7eWBkRRPGK71T60v5kyxMbTa+4CtLePapOcPhuKoUHfkrszxDB53HL1UjgqrTAYXfyrx2jxn1fjyUnT/g==","signatures":[{"sig":"MEQCIA/tA9QmSmIyBglwjbGM3Fb9gqeftthTOUHxTO2z3xpsAiBd3FLQ1J+zeVUuuscf1R34hwJyoG6i8LsI+gOqG04Zfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U6VCRA9TVsSAnZWagAAQ08P/RDsL3fD58Nxxdla7T3U\nshOHWZBRVovfvjgWjpAjFMsiGnmExtJKq/tSQ0xO2mGHzwBQJhoCDYAg7Vkr\n5ctHKOWimuvtRzaEf/VB+QyjViFT57FJORrNUijhdu/UmIPUaYDfIY4SKbDy\nc5mMLDA+BNfHIYG9uKMsy2SuyO30bS16p7Z0PaN6MlKOm499HJcbteMw7MPU\nJexTrnEsynEOervP4jVpWqVLmSIPeC80r23ICCZrbzw7+C2OCAtv6PelrWF7\nNGAY84KGJ+uHnQDr/h6K9WJYi/AHs5mft6m2ERaRfTgyEdVgUWcoJJXlUvyO\nkk+qctOCJI8QBQW/0gBBXxFQfqah9QrjhdfBziENlE61C8kte1zWWkAn1M0d\nAqpcAiZUd0Cqq7yMKKta+2rI6T3yynToe93zt/xHBeEmK+iOc0Xrfz9Ori0h\nu26oFff42Ikla/W1Pit9Sb/FUflUHVMXKqvbTUHG9P27s5oxb9B3jUcfvbWo\nOl6hI2Y6Rh4fJhtxWRYnj01GJIoO5hjZbo20n6c93CFiW0YO11U2OMv6te+2\nfj0hxYNsmk8zCpfUGxUIhh1rx8rnuAVKnztrhu0ZyZlp06pXlolyHLsVcgEr\nppkcDetSWtcMa5EwTnsm3ZnTWEbPpc0fha7MxZy7YOrDsAszs54gcoSRfbYk\nWedv\r\n=SYFu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.878a08b7c.0","@material/base":"5.0.0-canary.878a08b7c.0","@material/theme":"5.0.0-canary.878a08b7c.0","@material/animation":"5.0.0-canary.878a08b7c.0","@material/typography":"5.0.0-canary.878a08b7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.878a08b7c.0_1576095380855_0.9209787368631084","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/floating-label","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"1642f4eda5538f50da6180738b5c742230ff11bb","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.397905b4e.0.tgz","fileCount":30,"integrity":"sha512-IeDvJKPW0D4Be7RZZ0yFVC0mdysZZxO2Cp3aNtMWAjCHwofrJDU2G/3kqgjrNA7HRSojsxo0ECR71soW5OV0bw==","signatures":[{"sig":"MEUCID7zxM7gXPac178ehYELLa3eksUY+ITCF2dDqv4UKdXcAiEAuOBbxFNXrxlzvUjkc2NmPBiQX8xYUGDiHU9G4TPqrmY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8ao1CRA9TVsSAnZWagAA5BMP+gM7UXeJswkzOQsflQMq\nWGzB9ItSpulVUbTsIjLc2YEtpahFriK+1o40ZKWblJqNQ9ZZEDFVEgGukt3D\nmwOOic09fe10c1VS9RXa8Wkzi69AwTxLS/r4jD5rBDrGBAzZ/aD/hZmBnpVd\n8TIckfzM9+SdNN+rHjz5l7mw2hWr2UlNBdD1nRRTKOSpDarxdEJpAspe4gkz\nQzvddA5JEIs8Wg6COfcJ1a5XkxRFrQkPvM2ZcXgV2PbkZYwnvw3dXAcOxEmW\nLP4wNgANTi0AnMXXM02GHr9I6OspaNkwq2DkbazPgGMDk7V/nOCbzhvgD4Br\nBkg8Kemq3Dl0zsIxfnX6/5t8iPPiUn/vKFwbhj5YjmCox5Q9DKC2DAIYLt6l\nG9pwZcCCCalndAJXnzZPVKXYuRkHKLa+ADrA9jAnfrzLF4QaMFThQryD3IUh\nGbO0EbeHKcz0zM4gEH8Ejf0gJPCQVROgXOTp1HHFelT1WWZCaafPCv7DPsJP\nArTjKQD2SxV2BIYS8a2RHkv34Eth16VY0vugDPrsVevY+wbddmIGQaN54bEk\nedkt9V3wR4kYCGynTWC4AiJ3dzZiPnj9IaSblgIQz5pj/4kmy8USvNhlNhxW\nadZXszlSjBNgUw/PD0l1GV4wprCYqbQ4+87NRMK+BdiYK6n7kAN7v/4fUMDh\ntMOO\r\n=n3DY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.397905b4e.0","@material/base":"5.0.0-canary.397905b4e.0","@material/theme":"5.0.0-canary.397905b4e.0","@material/animation":"5.0.0-canary.397905b4e.0","@material/typography":"5.0.0-canary.397905b4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.397905b4e.0_1576118837438_0.9837217321796103","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/floating-label","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"5394b330a70543d2e83e492b37dad87ac6ab3dbc","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":30,"integrity":"sha512-+hGIZYGvCAwqEGoBZDSWG3qWCT5lkOuVChp3gwnuk+b+AVRa29pWQ9FRC8T67kq1cC2XnMui9WyJeg6n0E2+ww==","signatures":[{"sig":"MEYCIQDbP+CxEfTYFFGw5eIS+4SkJ6xc5mcPxDBwUSYgsio99AIhAMuIW996qBBMzJTuq4J9q1CJffqsE3uMa0gtgxxmI/zA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o4HCRA9TVsSAnZWagAAIaAP/RHIQDiWKxufMIGRXtEZ\nJhCX0e/XlcX5KzPvi8Sc3aIlqT6IGvIA/ct10TvPEsRufzjt8hk7bhLgwM46\nVeZqb1JDJNFrT0h9a+/p3QVJI49XvuCRy7z1jm1fBji3x9+A787O2UTv8xUH\ndiYTMX4fhB0hHIXYzqty78PjtSY2x+pBwBPopSa0OMbGBu2IgYEcIgdowY16\ncn8zX5GzBTpX1MXLtxI6FLeqPs3uwUkoQUGtxZW1jIMD2R5MFaA+KvPdjw0a\n6bizHovczGQJNLpenhE0eAedVXMgr21ayji73UoXy6o4Qy4pc+QXm0vuLGCf\neAJPbJU5oOfiZLtEg5tEmYocFzv0oD6sv0IQE8NV1jYAkUohVepyTAudicyC\nXoVhIoSxbbOjIkOs4/7r8i2HvIS+2ppYHOeWqQqN719CPsfJNy5JJYFJJmIb\nZT0H76YmsvpnQyehWA8pQO6sqteNZJoE7HgjDOGPttomdlkinkjqq558EQZt\n9RQLWHzX/ZHQtgpDneRuUCkEjzGegFVDyxr1JGKzL7/q4aExTAnt2nh4vr30\nDct+7sr39jzBqO881hRYEljJFMGCcfyOCfGNpnz/fF0NvU/isCv2Hzk07mKJ\n5cJpRutPQ1nognsCMhX0Ee65bIhwUJEPAu8DG0rZ3fDqsS4jb4A0DxrLEGi9\nsbMj\r\n=hwcd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1fbf5bd1d.0","@material/base":"5.0.0-canary.1fbf5bd1d.0","@material/theme":"5.0.0-canary.1fbf5bd1d.0","@material/animation":"5.0.0-canary.1fbf5bd1d.0","@material/typography":"5.0.0-canary.1fbf5bd1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.1fbf5bd1d.0_1576177158933_0.5905234979310885","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/floating-label","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"b55f467e0117eae9d24813d8c2b5337f66e53d8f","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.b723dfa78.0.tgz","fileCount":30,"integrity":"sha512-6lvEWwQlKcMUhQjCCfMEv7+0az3xvICvexLwvAo1d4riStR+Visf+6lLxl9qmR8bErQKvjBHEBHVU/l3MenZTw==","signatures":[{"sig":"MEQCIGaV2Qn9hmuarSJfX1LusqECt3nsXnuNPpRDmUk+lDtOAiAML9rkvlal+SuUgz0HwOFsBPAbSp41HeDT4bqjxQ7UUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p6MCRA9TVsSAnZWagAAG4YQAKCfVxHeYZVKdyELScI0\nGVhpM5p4h+O7FiarSC4Bd47tkWDigB7jW27IHWaOWzjVxI060lCJbHiE8f7N\nvuc1B79x7M+kzmTS+P/Yq39jzd4cjXttz+fjNqu3KrI3lAOj1rEYkbr9uhgW\nI7dOMQojpEmAlWSr2h5XdCf7nVJ6bRLYcY63zg65a0+YghEheGs7Pqh4k1c9\nE1lzir8HiWTzvK9k9upG2o9bWcFZc9ZJcFlRd8FHsuD49X0lXuNO4XcRIjzO\nFfijyP4FR5ZZwWrOqa5vaxMPlXvGfTQDTYOVjgrvOvDihip3dp6umP+BIwOK\nttxQ/aiAZgMPc0Te6Z8qTcaCwKy+y7FqMmVdvjgALiZb9JMkuRvVGVbYOyFC\nQW+Eo/lyIyGG9Qho5sjz+k4+GOwvmxc6KpI/cy05Pwi8Kx7+tuFY5e2rSRot\nz0VH9mDwnBFWGG7XqEEUQTGKW/QI+vxyQnVqsRGOf4mjQDgbzsImahGEXaqs\n76UsqFe5S2blCbywI5oe3ehg/yW6/vRGtHG7gbwg4021L0UhM74HTHYSqWG4\nMEBu/3CaIz1i5FaOuEsEuZy5Mpe5xylxIKtQSFSA5wzhLbH6sgLbYH6u+A08\nQF3qH62xyl7gGUUjVbkzb1GuDGFM2je8RVdKNGnGbxbn+f9B/SUxUYgSXDzs\nJEq2\r\n=YLha\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b723dfa78.0","@material/base":"5.0.0-canary.b723dfa78.0","@material/theme":"5.0.0-canary.b723dfa78.0","@material/animation":"5.0.0-canary.b723dfa78.0","@material/typography":"5.0.0-canary.b723dfa78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.b723dfa78.0_1576181388558_0.2136689255691424","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/floating-label","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"e3d62bdbc5759fd2fee88e9d086719567c02e0f4","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.1c494e567.0.tgz","fileCount":30,"integrity":"sha512-/L3qjAcwMJ5OUj3dACnQ44QlYVOTrrCE23YxbOuPgVQs+rD7KcE/CezDYYO32V8PkP+ZwIZ1ZeWcguURUPdJdw==","signatures":[{"sig":"MEQCIHj3rrZL0ODaknINAeOBNX5uphTqg3w+PxZC8xfMbjRKAiBAV2+upEMX8xyPqGqkpHJnnsC3Ir/Vk1/vQnskUyz6ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s8OCRA9TVsSAnZWagAAov0P+gJchRiJEYOK7kZbQpCL\nhDjV6t07jJAchz9vCQGtA9gTBhJYEUljae92f6X0H+NTXkPocZZdDctl0MN3\nPjYIV99GgAEMjQ6os7As3ctQk0aurvRXZppTg73DJfY66+BirISTIKAhDPby\nG7Y5uZge77JOJqTC00g8Rgk4nFRb8dfNgqiNBnsolK8ZRBpl2uWhfggL2I2D\nz+NZ+2z9TwAYsOTKF3Tzovho9F92BL67RMhLIGY5D234c/YpIrvFG/V4S4xW\nFT/Mcq05J9iZDr9KKcq67SHw+1j92pyQVWIgJsVh76vsruO7YhIqkBRdLEdN\ntCFtmYAt3M6g/SUJw8g2AJVFsDd9Nl17Eb7TsPZghUs24KvMbBzsSpgzd72k\n65oPKyGgQne04D4IXDvwImkldvlbioUgNWlBFT4U70xFPOmUrHxysLZ60kno\n0+PzwgDVp7IT3bOEuK3UR0ETXRp6KkGzW5BWfpPbZqvUw2hoWGQ4c5xNtCOb\nBvsyksUvAulqan7RuD0+RmTeXp/XEf0JFYoR8naZEKKeuTZ0amSaCNZM0hvZ\nOwLcWAGAyb+9B5Kc5f4qIzydZNamqjv6ptIJK7kgxhLsux/Svo+R/6vEUet2\nXmEt5tGSODMci93r58Eu/uUygt83Moo84HHdn7ebCZY5ZgFhttO6HLWHV2WM\nKvfD\r\n=E+WV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1c494e567.0","@material/base":"5.0.0-canary.1c494e567.0","@material/theme":"5.0.0-canary.1c494e567.0","@material/animation":"5.0.0-canary.1c494e567.0","@material/typography":"5.0.0-canary.1c494e567.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.1c494e567.0_1576193806166_0.659322327572653","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/floating-label","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"46548d32758234dec0346ca1f1454f9d112f6a29","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.c9e98a125.0.tgz","fileCount":30,"integrity":"sha512-t2JGIWUxl/VW3fTeJag81kQ7wpngu8D8SqYWindcWc7Wau91iKlgoqdV3BPZjoasX2XZsCSI4m7oUk8QJlup1w==","signatures":[{"sig":"MEQCIGKkawmf2EHVJbKFeF+Lzh20OeIPDn79teDHUhAe5SKkAiAzympttoO4jRfVT9CfNM/Lz4rGK01GqiWT+r8fPwIkbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RnzCRA9TVsSAnZWagAAeQwP+wcpxouOoehx5lFQHC7c\nLHn+nr0QByYqPY+W5xPIjzUollLNfhaWfhc8AXEKbHe7DL+bctjVZ1y6Fn+3\nmxMNbUZSrwTeR5GDNtvo5tEisPuPMlLpOUysu6p7mZR3yPcjFD1JmWeYQk/y\nENDjbVB+DV8XITgRLa+y/TUYQf0Exe+b7WXS7pWlaIDRv+mPoE9PXZzoK9a8\nAiNcx1sVVE12uyadM2AfUkOdBGxycZPQHv1LXD75/8G+ivEhbhpg+xbCuQJv\nlSmlAFvqF/VFx2WBqVEBFSRxDWK6S4+RMnbckQi9RCbZZhQWLsvmcPUWKc0G\nH/ghn9RMOc8Ovj0v6EJ4IECf9Xt800cGmNoVyVP3jxOyGFjqloz/cj8nK9Vh\nDzqmVcYCkzXfvyxhiNFkC+Gn62pmRhlo8D1C5nl2WRzvXB8h0PSqghQObsEJ\n6JlUFIX9g8z1pSC8ZugX9VeCfFEhRdL424eMT3bDzenygkeGpGVXhfoXrO3U\n4IA+qBx9X1XA39939oiKi0/0LIeMzKjT7Ucg+6fyc5MC10f8sqDH754liJg8\nEeZqw6IGKGvKxJlBk0K45dqVH8PX40aS9f2b4akjBaDjpL/UhRQaTDb6oh0I\n7rGochBCnGMnjidPbGW9rL/oV9bsGoEAbVXRPPzsYGOSL7jl7zSxVG3MBKAs\nqYS3\r\n=xrny\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c9e98a125.0","@material/base":"5.0.0-canary.c9e98a125.0","@material/theme":"5.0.0-canary.c9e98a125.0","@material/animation":"5.0.0-canary.c9e98a125.0","@material/typography":"5.0.0-canary.c9e98a125.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.c9e98a125.0_1576606194817_0.7767545076776481","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/floating-label","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"91e2139a181ee5fe925dcca9373f30b098aeb9a7","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":30,"integrity":"sha512-NufaeRACSFReeIjwoEQf/5vYBdpuGpbKoGeMJM1hWB2/o/6qEh484JgybMQdcNVlcRYV3LfT6GEAa9fHMTOsXQ==","signatures":[{"sig":"MEUCIHHM5MHrYlGS8OcI2a7I/3oZrpWIxN1ZZgEa8Fws8UPRAiEAjBXwC9JQXIuQw1Zs+/VN//4+ySNaD5NNzOlzbqMVFnc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+VevCRA9TVsSAnZWagAA9K4P/2cZKVUwRPN653mogF+G\n/blN2ZRASKRM8kOVNsLyKJrPOfW0jyR/UcqfeVxOzftRdaAguS4tFzKQ1BXa\n1tC3PbLL/7Qc8IOoJy3UMWE3bPDKnzDcQ9sjjKVJvnPSUoaqILeG78nFFi8b\nfp2/ikVFH2np8qzQ+yIrrvaW9t7wVArdEXYXsZsFbQxi2EcfNWd7XzHi6ZlR\nOfQ2Zlf+ia1L0urrkH4IZql4hqRvmQM4LJI3ODQI3Y+VjjTscofknPr2OZE9\nQO7qE614JtahHh9jgV0wCOAdB/hwmjLh4vQhbWpXH2w3bVejZPU0G6AxszcZ\nABsMD80riUOeFfJbeqFn3gdIrR1DEXYq2M26qA76ZdT28QdkeQfTVhr/ux3o\nZX2VLBtdnvRbtGHJidxYwCOAIDd2XyfU8nj3cdTZa9wjKu6BIStjorx7rGrN\ncLndP8ZL37zo90/8dIJ1ZHVtAQ3KNiAzKdoHl+o0Hk2027Ci66uZVav6W0ia\naOn6izgGpDUbKrPSyslyl37EJAJxIRURhyDlqFMRXLETv9LZrY/3QA7x2CjK\nr/LAz1kfBGgpz++vvgIQ02058qLxvBwsWNRgKvvToxKXd7LUbCLD7yb9zxrZ\nl8NLswPRlrE3GDMQcMwdtzXW8bykYMLwnsKl7x5WJqXEEs7u2Bw/Xers2Vb4\nDwHy\r\n=/Z9w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5ffe8f7e3.0","@material/base":"5.0.0-canary.5ffe8f7e3.0","@material/theme":"5.0.0-canary.5ffe8f7e3.0","@material/animation":"5.0.0-canary.5ffe8f7e3.0","@material/typography":"5.0.0-canary.5ffe8f7e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.5ffe8f7e3.0_1576621998679_0.32258848301956444","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/floating-label","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"c3ba5d20e379fcdfa00defb7f1c1fafe8488ffa3","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.47949b08e.0.tgz","fileCount":30,"integrity":"sha512-9EjWg5QaWgnP9Jzyr6bqbbxlobhUF9juw4PLPHPXimp3cUKB3+ag/h4c1cGmPhkaNe8lrq5wFnMD6I2nk4dI4A==","signatures":[{"sig":"MEQCIF8uN22NSqgA2EwHsot4dz2ZCZKWUlh57baO3R6WUL4mAiB8mzdnNcwqNkguDQyCm5YZX/CsaN+X/DtBfbNFDeQNsg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mSWCRA9TVsSAnZWagAA2q4P/2e6V5dlepvyhsclkjTb\nxYwZ1Jhd3jqUtluu96zMqwpXBoTN7khmkvN+9XJ2yaK7J+2kK7BtTfcD9BE6\nEdrH800KWItoCzVl95cen/X5UXkYookccdYzplBtbqXrt3kSgXXP/sN5zQhw\n0xZK8CG07z7Ilq3ZsGwJV4amB7HJ0+n24rdmR8ZDWuLCDZGKVwHInjMRtOhy\nk3oYnVW3hnrA4H9mwY3b8cpd80Jn3icZLm9J+XQvCGTohR/IKFOzMh0+Sy2Y\nJqMUbhwdaLjvhTk3OB6LwgruOch98TsV0rhQRPm7yTvAjUMP0qcRAVAurCiT\n5TM7xd4fLMMWjO2kp1l14AISDVql4K92Otw9SOn58i3FG+04NV7+cbHPLio8\nh5LYW6q07GphGbr9vAT3HfHbY9cXLibcjHwBOosZ20tBlrQ/MJlUiiQAcIXp\nFgVIgHg0Zpm6TdIXRqu2YbxfXq5359G1XPbbXi2AnBg0Z2Cjmg+4EmMDyq7X\nswaXHBDQL3PQ8dNBDZxhXxj4IeF/y8gpoy8smEji1+qBsVQqJZpI3VjQzw+r\nsHWzymzbR8p+HYjwsEmiN+JfFLmpm2yRlTyD9N0n6WBUhI6fAreKaKux2/k8\nFg2WXrgkTPpHAcFSANaiefgCIiQx6ybmKlx4AEbW7lgrt70HMToFxzTKzmD2\nHW9F\r\n=wrx3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.47949b08e.0","@material/base":"5.0.0-canary.47949b08e.0","@material/theme":"5.0.0-canary.47949b08e.0","@material/animation":"5.0.0-canary.47949b08e.0","@material/typography":"5.0.0-canary.47949b08e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.47949b08e.0_1576690838392_0.6401954585882506","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/floating-label","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"7e497e51262ddf1fa2a58d61671a64e49e7779d2","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.b240bcc1b.0.tgz","fileCount":30,"integrity":"sha512-zanwItR05hizke6yeh3J0ZnW1ufdHFCk6k/bqJ3ZgeVkI3miIbij1SBdoo873dFWljsgaXxuKgVf27tK9GMVDw==","signatures":[{"sig":"MEYCIQCM+HN82EZXaU44XdHWknDTKTyQdBIECaEYHLYgs3HqSwIhAOnBcFvIJTLWI1GMkKY+Q79pD2P4Sjcvr3l8QOwcsUHI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nsjCRA9TVsSAnZWagAAnTEP/RR1UoSXrR7Chm1uPfPU\n8L4WynAgYl56a5eIwj44UhmOrv4Xa869KTIN2gltUUnViaoAmw8QwotqhYw1\nxHs8zVW7x+SkDFEUohI2cmxl4r2C5sApfJA5QCsxqNbZ2bgoHgkIDi8QQL5a\nuka0Hk+cuzFyYH/AeTieDzr105dHRBQEW17uSCSQda15uqTgcmti7cGyf92i\nU/hrBpFwTHyeP9zl2f2M0N4GVmF1v2rQaxSXpGFpVv9DdFoCV1h8TY3DhhOX\nMz8dl6XhHkNU9hV6ZoYd9rUaqe7Ko5+FzsTJ431DJAUW73dRUy6SV0gdvC7S\nyTMQjS+pSxZzp2k//KIy28BKwyjHfcGe4nDzhpT2jCQsnRAQ1qXfM/if5nkC\npIf9acX9vH+dLpdKIw/sLLm/Vs89gU4oEXCpOL7BGO0iZQnD8Y/g5XMWNoAy\nSRycldRdE5io2BGXVpWcT4AjElodzH+pwAu4Fy2I4EX3ThMB2/aCsRmfEs9+\nky7aaTkX1tqAI9GSmfLFS5PJ1ge+uADvDZWY0qawpitHiRjwQ/jndW9V4ufu\nEKt197Y5qAl7bycdAEAGfg4ahKWkUbG2dHRBPx6IPaZUiaEdDojPJTFctVw1\nixJOgNHak2qXobEnc24DDp/r+2gooYZRn9K/R95TbBt9RcK5alXWlT/xipiC\nEmBN\r\n=99hg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b240bcc1b.0","@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/typography":"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/floating-label_5.0.0-canary.b240bcc1b.0_1576696610711_0.6519650137883175","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/floating-label","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"23f060bb226f732cf13de76651c8568255f1df47","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.391674a26.0.tgz","fileCount":30,"integrity":"sha512-e8tYwrQP25BvOB1a0rmb5FhGWqahSNZqHyFWb8zb9304Fm/EUJf4V/nt3ubqMwK0+y3I/GnMALA0/ZWVbQVq0Q==","signatures":[{"sig":"MEUCIQCA1ptEJPYGUCWS68iKMll8fNVjxbHKDvM76rV/MbP1sQIgXczYNgYXMZ6To/Oxf5f0pLIEH8IiuG2MbxyLY93WEaY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nsuCRA9TVsSAnZWagAAshQP/1KVKQlhWKyTxR1YTceA\naUFjlf8zwYDcBNv/H4AKzeU0KkSc/baw9pcrQUmSqW3VoAGM1XgfYimIwIc7\nLr3GaQH9TQV2c0CJpm/DvX36oC5AlYS5qiZCUYwswONC1VMmf9arlG4b95rp\n9gR1BR28+7JQcZYYZZznW8QqwPywgEK4JE9M4QNOUzLhdkC6lU8OWgI0l9ue\nyAqoC4F3AhmVf8S1+M5f/NGx/nEJ7MRjtgxd99HNtc0xnaVAnPXVRtPA8Gtg\nImFE/Dsi2gwaiClOJlHDCgjJZ8k8w0PO5icrY9G2vPJKTEQm5h+vr9lWwJiu\niUtsQRMsBK7jFNUxdcUCY7RvI4AGbiGX2oJbMNIL0PQGbApTzRmkYka7C0RO\nKHsP2sBKsg/Savrh69hEgBH3F0a+KNEzq+tMTOwFmdE/YwFggV3oEeDaKzCP\niQBfnQ1KtoJU+CBBuzgYWS2n1jlKpCZwNBkmpTuk7OackME89AYupOh0MtUW\nwsVa34kcd6Jk/bSrWpZMc5HUsvy4PF5xMu5+NAvdzUu4vI+Lzd7G6JIuW4u9\n0QWg32K9IymcnDOgAOP8aCelmE5xXCQWh615a9lRQDfipyXO93rW5rfDplff\n79uitLlYItL7WdjLxcLIVSjPucA/n/TfXFCNVEBCzn+lJ8evcWmW1o6VKVVj\nZQ8Y\r\n=wYUu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.391674a26.0","@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/typography":"5.0.0-canary.391674a26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/floating-label_5.0.0-canary.391674a26.0_1576696621567_0.26636844240524504","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/floating-label","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"d4a70a08b0d05c32b3ee4f0bea783ca6dee7ff70","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.c4837746c.0.tgz","fileCount":30,"integrity":"sha512-qqXAbaw2RGmc1lfXDVC7/9mcBALaFcFJLmn4zgZN6aQ84waMJz62/P6HxFY8xztxIeFR1ZlFtMMLCz680xYSMw==","signatures":[{"sig":"MEQCIFeiYOOyCCQfeOARisR9VbDauNjPLqwTU7wGLp4yClT2AiAnSfE+ldQBxc7xxroiQCGL3Eh3mpyT1U3lHFr3FDsKRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n9hCRA9TVsSAnZWagAAn6YP/3YQacE7hxKkFZrandLR\n1eNq9fixoe+ypG1tyu4q1jWH4i2OiZLbgOhwbrP26UIyzHxCY4p8yD9yKOhi\n25SrkQK95MvRYkzg+h8/7vGEVp62L0B0QmTVL2XY2ZZEPj98S+HZEKEEa3Jh\nPYLJgdk66zmr6GFrQ1IXoSNnC2GaBN15YXVSpyAGMPNxMp4oLcGVOVY3vbgL\nuBChevfE29d/C4JcNGaNCuUv3zP6qh11e1g70dpbTt92AXH3sp0moALadav7\nCStR0d/LHLzXNeOnTU+RVNAwmx6+4Yo/Bpnf3epVeqoQje/Vt5zwbqkJsYpH\nZQXXPUEQto/VSmxG6GrD0ZrVpe4L9wnN0RyRAPTtqeoWSLegA7gO2DnNHdwS\nb0ejX6ZkixprXTj0jB6jtIItEmLXUThXj+63CS+Y1TUvG0u4SQ/OxZP5+Z71\nOE9jRPNcYQyoEtnxM7bgclw4eUrZJAiROc/rggh6ki0qW5aLvEgc+0MceZ61\n6WpSjKjnHMqr2lV98tvzaUWe8qVs0O5NrtmFJMKXCBukLksg+Z/hZYhK1udY\nX4PuaiIw/esEHXiCop/7/7eTloYhqhVQmR0sGnKF/94tzr581RdwwW4T7yvC\nd8Uc1CV9AsyMqICQbkit/dSdf14j5akoIiEycy+Df4anRjY5I7llr2/wiLHX\nN2aP\r\n=xyAd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c4837746c.0","@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/typography":"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/floating-label_5.0.0-canary.c4837746c.0_1576697697037_0.5833149409841323","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/floating-label","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"02deaaec7a3e7f607ff84b110b052a5472dd9f67","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.e41a70425.0.tgz","fileCount":30,"integrity":"sha512-HwJbQnDN/ra7fWBAu4Gwp86ku7DeSnDzJooP44Qh5PxMWo5rl5Zl9/hay4hXGaOTwfIxF/C4QiSUdE1zKcDldA==","signatures":[{"sig":"MEYCIQCk2gYI24v/y+5uk5orTa8F/gJNbI/SGaEu1xbA3TOmpQIhAKwrBao2ZMTgQsYzTP9kUUXaOGS2eRotamCZV7PkgejQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rQtCRA9TVsSAnZWagAA/jEQAKDb9qhagW45BMkBwrBG\nfQn7nQaS9Jk8x3uff/G96Lvwe2sYAhwLs0OigeIqiG7LaMLC7NGiweKsi8LX\ng/h4un+8p03IxT9e7YLDfqXrkDTDtb3EOQbx74wYJ7n5CAN6kHfckYNkqXW5\nEUfmChleVgAvlcADb8prsPuR563yPBfFDSVJ9ZM8YZiApemlXoq2IPE0U0bK\nBSSsB0pAohIwEe2hqJ5kerUXR9NTN7Qb3mI32ZsbqRIuBVWRbfBU55OXQO13\np/Am+rcuZvjXKr6yFMmu4hUqI2BliIVzd/6qIkY0Ehd5QhWpb8TJvo9yxA2x\nE75USaTNT8SWUYuXGKudSZITYPPGJk7rgxPctiuF0jaSwvh5ipZO2jpzrWyS\nBqbUm6IE5xVBCGg9nx+3IRH/v1rg5AUebyn/3G5pnYjm7VWMTMfiGYk+cyH/\nP/ityCXgGuf1DrdqYhh2iW8nAxeecEBeRD9aZt0VszttEFFq7w1W2SS5CkAw\nUPVraEocL9DmVCN4QbzNrKmzmW/5UxV02C/HqusVRI/GTNj+8gUEQky9JrUX\neo/tEC1VewABU60/2Ck3WCGDiF/PCj0Ks8Rhnn5DJrDkuUM/PoUlhHJ3EFAT\n0phEHBVRVDHmfqUO9NPMkXQpWAXENq9Uj/OLaE49H33VQtbR4BpaILYSE5MR\nFKn+\r\n=guNM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.e41a70425.0","@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/typography":"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/floating-label_5.0.0-canary.e41a70425.0_1576711212765_0.8073634224250781","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/floating-label","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"829e804519a0e64687f4930c34c77ec4a938f866","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.bac43eb43.0.tgz","fileCount":30,"integrity":"sha512-KqMNnM6IssMHpTpMuxDFSJMhvKJC9+C+xrawOLD2r7JKUzQxN1dnuW2HTByzyB1ijEBHh/8hvGZH/bQAZL4sdA==","signatures":[{"sig":"MEYCIQCdGlSDp1i8SuEDNKnZ5XG98ggqNBv0R7yWIE9mbpBCWAIhALFOCC/C9JM7Kj8S3P5HunVXEqdzLUYJsI767NYHWNF6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rUVCRA9TVsSAnZWagAAxKcP/1P3q3aWn1kzUFwoH7cM\nCIa6m1UjkCi6L0+q9ptIpZvZxf+19Ym6DhoZfrRcJIKM0gC/AL5olWvuoA+I\nIWJtrxWMXWkRQkxC8mYl6Y8rx4738r3b0nkeHsVbVVoHEAqDnJnKOM7r+eHx\nNTcn+lVwikZyn6FFdVQ2ZNdo6L0chNkZAgruzXt/q+FnlSdDiX0oxUxor7I/\ndz44wrHTN3wpxL/YXKMAGFWpMngqTk5Y2EgUKlhtKxQxtVjUBoTYAZ7y29BE\n2OmHgFpL3gMbhegb5SOk5kpwu7eoqWC71Ad9SNlSDyz65qiqLc6r/OjbN/It\n7vUi/STGUazjE3bgGe1Cxrl/XLqA5RyQgM9cB3WGqnDE/6TAM0+Lyfj3pbbT\nn9MKEwM4gZcFRvTfWh9/k59uMevHf9KrE/Qeqh43mHrWMmJMXDbhOxZIQCtH\nJEbf5Pjeruy+ztVk1i8IBiOFx+cytcXn8YHZnzHhD3vMr7mjS+2CMtQrkLBV\n1O8rmjDopdvUsQF4cOkDPtt9LCmaOYLrK2/vsnaMqVerSdnA7GPYGYgOriHp\nloronADy3ZZg00aJVrvxWni0lsiiijFZsAB6qMb1YWUMRcp9B9VVd5AaRWgZ\nvtVQ0Z5EYRJzN4Q2g0oRJ8ASnFxmmAiY9QYlU6NfftCLyfG3G/Wu1tLd/v0Q\nrXp1\r\n=3n67\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.bac43eb43.0","@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/typography":"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/floating-label_5.0.0-canary.bac43eb43.0_1576711444741_0.7736026064650043","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/floating-label","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"f4a6204a66e1455553ec491b5a7d5da1476cb2dd","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.2e491de55.0.tgz","fileCount":30,"integrity":"sha512-fg/nDMCHqcPh5fZzKjq+muDB1P3iB57j3wSU0ThDqLJB4thDj84YGM2A0UzggFllb8bjDjzdSSGY7QeVkynNOQ==","signatures":[{"sig":"MEUCIBcdpdyUxmiCAuJ0iWWAdUXQ4HPW30gA0rkvDzlF+kMuAiEA8GA1XYpISO6113Vpi1M/moB7GtMsR6fci0VlROXtib8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1XMCRA9TVsSAnZWagAAixcP/189p7P4p5M7zgVzSNlU\nBXVYNXgkvOzdydHeLKtcnaA0KwCKGdfO1rIOo6tkX1o+KFEaQjxR3W7C8sv2\nCC4WaxdWll7Gy4ajS4X8rTOiwDPJPNQTklVgLB/59pajHVRNQGi2arwfEX3S\nvUUN3n8yJlgbv7L7OIFUu/rjTnAbjwEHy0eQcLxE6sCd2KdW5wV5y4Q30R0U\nvSbdMR1AknWrtCQ6BC2CFAtbOKAaA+vCg3EIJn6Dcr7sGY023CUrrEcGNuhm\n16I+/6jX6qk+qoedrR/lgdJJJAdeQUw+Jph7oAmLrDtF0iICg13/IBmWrkpx\nOCQZ7LS2bch5+98lIrb8YnDO7SE5RB/Co/TAbT3J7g7ay4EYBsDI9A6/l9K6\nNtFRQFU07vcAYjVc7NA0hTDohEmGL7XsePJ3Gr2/fvwdNSaDdqCI1D/kuN2r\nRLMZBKOTBLWSMRoBQaJXeQYzFkWT/AeAvktAwg0Yua5V5VDzT3UBJDCLoKgh\nuxrDi16hnLlFuPi4e6DQfkGMp+UQQ+BWluHpe+RktLKK1BiJqNTChBxulZxe\nx6PCiu5zgtOmMRqbUhjGcGBUWMAhnR3sf46G9hgqkfCDAq8YD37TjISWN8dH\n29dNv46ofkSPY1AKIwb1+9VLhzJB6FLGRak8UxUFYZqVtcmxLvMljLZmems8\nfuFz\r\n=EZ57\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.2e491de55.0","@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/typography":"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/floating-label_5.0.0-canary.2e491de55.0_1576752587633_0.5394121215623615","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/floating-label","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"ad2821e5de18560428aa003954eac71657df0756","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.ae101c144.0.tgz","fileCount":30,"integrity":"sha512-XOMvuxq4HYsVeFIaCAL+cWW9Ld16bgjwySLbmYbFtpz4V47F1wPHKuDUDX9duTgSdcErugRJwci5KGU88tiZpA==","signatures":[{"sig":"MEUCIFFOPBe5VMLOmv0ILRyfc2UxUG7VtpkL6R4mTgh2qccpAiEA6prHj9A+F/HjKiZSpm81qPlfZdkpvB2H9UcxYGGAPaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6RUCRA9TVsSAnZWagAAN3YP/R8Ttvb8/thcFdd9z/GM\nePY6UlyLX5nanLvUe4jnYuWZrwnYV/y+99eAB7HDUkHX58ABIbqcvI6xoTte\nMJklaJA2C+xkrvFsSRuPRFsNYPAHE9IxSrYMQWKXZVbJDR+E0hLF2YuLgmho\nXk38zVSQfdaAhE2RPxszh2iKpJ7QBnnTTnIzxM0BNs5Qw185uEEt0tZ4H+Xt\nb4CSx4MWGV4Ka4p6QCaRc+DwDo5oNksvyzGCTwIEYO6UdhbwNBpBVDwALm6b\nyzxteoIZ6t006jubpxllH2H5h4LywijKfhG6GSh1gv/gdstLSdIvlzLLATvN\nqVGqf+8/5gT2Ai95TpmbQ/fVkGcYzeQmnWk1WjN2w0VBbpQ/45jpItz2G9pV\n4pUkGdU9jvnHU+qZLP9j0VNjrchZllSTu16tMGVGQBWI0dTFBwzuYCC3fr/b\n9ELyhc0mab1Uag7eRPiYjZDuUPxVs1LKTsnnnsdHAeQ1MuwZhTzyqxt0n2lU\nPQklp3qXg38chA9Z8+Oc8jsxBLjc3pHQ4gJ2YTyMhNHif8hVEHnpu6hsg5eE\n9Y/s+LPMMlx+2J9WwYIr1zRbId4msLCc+zs/4IPHBu6Hk+MZaE2zrsznMZUv\nnAP1LqmNbdKlSspnVNtCk8mOv4v+bm+VVRoRo1Gx3FU4FT4OIVm5urmdozfp\no2Tm\r\n=cNYj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ae101c144.0","@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/typography":"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/floating-label_5.0.0-canary.ae101c144.0_1576772691384_0.2707311281830518","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/floating-label","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"8a5bcc9af2b4458a897ff58b19ffb9a70b6eaff9","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.a51c31f26.0.tgz","fileCount":30,"integrity":"sha512-4W4fSx6kvNkRmylUUJMKFUkqfE2+B6GnkcWtTB6bRGuYsizKvRlMpsMkUVgpuWhKSEKO81QTpMN1kWptdP6AMA==","signatures":[{"sig":"MEUCIQCmHn3al0oaa9FYTkDDM5QNNw1UOkiGferJDxgUMpBaygIgJf8q2k7dTRZlMlbZchRfZkCtQQY6EOHtvmTHDz7V8/E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6/oCRA9TVsSAnZWagAAh/MP/1se6boMASQsQxMT9znX\nAOcENkvWanMtEX7szsSlcDBTHAcpt/IzCmX3gAksBVMBy27pHlykhd7/oXwc\ncy1AkgRQh19A2fujfJ2NvF08bRRP378p11YDo9pOAM2mT/MStUQYAqvZzqqJ\nuVi+IkZmpAaApcJRrqQJCxCswfok3ah4DHZrdWu7KgOclROcsqtEPmuRl5dO\nzN6Qm4kjVSeoOKWEhOWsAU9OgFBFvusThDfRL5SB22JkCnrz50Up+sFhdAEN\nsa+h2jj7tWhNsEcFzlYLeUfc8X4XgmhDYCmzEC7ixRcgacqnd8W1Q4saU8CU\ndJoYatsAI7IG1xRkkTfadX95klfjhezZDzWVwbMew2jS55pN7zPKKIYIOH4Q\nreB2BSeGq77RJaW/yq40oP/Bmis2Vk49gqw82uTuVvCmUpZ6UDeXaz0fag1m\nBuWtsxN302vMAW2Anflriw6mgHwo/fgzwV97ftFuRAJ/upqc0cn2Yp87Ta5C\nnDkMhBX5mpnpFXZk78CeKK07KKz/IrBADri06jHxrAXIcjnxTFB/Na92P+33\n8Vo+/DDxq7FKoPnpFVyDCxbFgU14K0V1v4Plht6yCGIS9TK8xCYMAiZKGLZj\nXO0nXZMtKdcFdmWwcEzaMQTvQUImIa+8wJN/U2Lk+DZErujvSVeKMojhL7Tx\nmXgX\r\n=8u1O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a51c31f26.0","@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/typography":"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/floating-label_5.0.0-canary.a51c31f26.0_1576775655665_0.180769768706317","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/floating-label","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"414943c8b9d9bc9cc545f034defcf38d8071d0a6","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.21fc4e13b.0.tgz","fileCount":30,"integrity":"sha512-iImZmBxhXe3WvzE1uE16T0dkgwhzCd4lCNUBJVoYz6LZjMTmWgo7U+IFv0b3qgWJw2ngbS8faLX+tMw+jfX+gg==","signatures":[{"sig":"MEYCIQDtwZYqrQqSohukkq8+ttnPT/5gdeg3VqmV+XhstnPeIwIhANodZ4mtkBdnSsxbq8539o0GukbE+QeDbvgPgd+vF31g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++ssCRA9TVsSAnZWagAAELcP/iHSRWvyrdG1h7dKcebE\nvrYTwzsV4CXUhVOOi9zoPE5BMMWObLyGGmpiLjGV6QOXbvonBdHVSeZUkhek\nRM6FLzwSPJa4E7CUcAkPZckf8cSgj0p+BVRl4ClhHmlaaAZREwJyYyIEDj1Z\noWVk/6h9YSMy+9tN7uB3aHBWarC798HDh9i1TH5qeQuVSm/LkWxPFQrtguGn\nYI/Uz93Q6B2laIa5vHl4M+WA40EmyjlQDTMO/k7jQCWAXWY+suP/B6IUF8ps\nfHb1ToGniuy1GgWDBkcFgWl4j2zwA9UdcHSbr92anl4VgpUOZozrdSrjX6lx\ntgHbshm2HT9tWGmjS565Z2vXuWTPPAdRC0cM2m+aUbjGwwjRA89mc3EEJ7tn\n1M5xnora1q1axkiaLfnsTI+5/O96S46svgdaLf7wZ+2EaUnDp5zmR5cUjA3h\nD2SCiwq5TxKVvxkbIpDnBHYB+FuPbnIvQd6n2EIw50x+K6cZgrFqt1ZqGzZq\n/WAUDwxo4K40oq3p2Avd4rZBGnCmvjsGddjGJQaB5+H3YVcdO9/GD0Qsq+nk\nZHTALV7tVtJjcYTPPhya2lj0zy0m+I2MPXdiFiO/M6Y0PXSwciuY+l1xR/2Z\nDjApwNMB2ME8je1C7CTfDlZr3nSHYCureWXNBe8vuvm7dXtS9fh1MF2aD1Bi\naQ92\r\n=ygj+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.21fc4e13b.0","@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/typography":"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/floating-label_5.0.0-canary.21fc4e13b.0_1576790828011_0.26092350755729177","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/floating-label","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"dfac89470af0a2edfe90e85bea577fbe81a7b538","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":30,"integrity":"sha512-6YVMk52YyktzyT6X4+MWlE3pXd49xa5unYTONBqHCJBJY9tx8xrO1qrK4yUdNvske/FygoDHW1qJrux822Dl2Q==","signatures":[{"sig":"MEQCIBw4N16shySKqd2H18PZnYiQFwEfLtCX0nuJw7S1nTu1AiBQD8uboKRM60XU6AUemhmJWDTJf8E420hkuv0wlPC+ug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/iJCRA9TVsSAnZWagAAtiwP/jqqEBT4LLCzDaQJN1tU\n9a69HZg6TthfC9ABgPvLSaMHqiVMPudmCUIoCmF+sK9HijlIuWVvQsuhgKfH\nv0IiJ7GnFIddHtloSoaSSeUqWE60npQN5mkEh/atjf5JC4nNiYt3bWnXWLTx\nUWUagaAYRJDChKR39YIgfCU3W7h5NaK5ATCBNuVN/70oDfCY+eUn6rjL4dHZ\nHpVx81bIpPbfTKXVR8uMlLDqRtOzrsXNBv3d4ZBii2oYhGXD4eBBrFCtORCj\nXpGu6uxreyTwCMDJkRai0MNbOG5P09+6OonbAFp22VtDIDYvn9FiDtGDC4du\nOsATBpjfFeZ6jYcgPH2qepHNl3DdIJ+tzOCxcoRlA8RiMhjGEAjREb/KjuRF\nXJljxrk+UwutfsBtyIC9g4prDM4twQddKYAcyNuCDm4Qeqq56k8XDz6dsUsp\n6X1BIg+IQhADuLbelQjkJs5Gkz1+m6FDZ9lZkMTjgyGltV7FyPDTjLUQkmwd\n8vd+pJ4YK2zq2rcHnTrSZMIiHqOKOSHh6ssKRY0ed0VOOkGUF1/UpWRE7rO0\nG/buOqlpj6g2bnteQvv5EK1SpolFmS3FWFyPKbj7OgwRt/2nDJiXrIH/6yX2\nMMGGY+PanZb+S7uLPUouVARj9q65n742ExWtJQylYGCEA+B6niHJeenCkONO\n3Qxr\r\n=pP+R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d2ae6e17d.0","@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/typography":"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/floating-label_5.0.0-canary.d2ae6e17d.0_1576794249349_0.4975051005527109","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/floating-label","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"5a773098bb2b9e4e87d688a1628f83f5078ee9b5","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.ba30399ad.0.tgz","fileCount":30,"integrity":"sha512-K/Jyi0JkZ3KodCYj6ASxWyuScVDrCT6l78NqgDS6vsMYbUZj+IwQviajpWVOYipLUl5oCaqClVfOsha4cJXNsw==","signatures":[{"sig":"MEUCIQD1zIIrVJ26jCMe5LxlgDB0vWRyYTm5sPKDqSvJ5+DlyAIgIqHPxOQtRUw4c/VKuRJm8dYjTVxs1qY/AwAkRKud2RQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B9VCRA9TVsSAnZWagAA6ZMP/0Z56H6iGSLn5M1o1OLs\ngDoMjftxMuQn24TuEaDOzI5PvxuxTylFsp7zk3gCPr8u00fsA7CGm/dQ/Ys0\n3Ud8lqBHPs8ZjgTWu7RuHz17K/oTS2pMnuZ+ZkJY4xc25+4AROKjFCAOTNxA\n/nm2i+XT8fw5bUo5KX65l3vjTTH1iqYi1hYHhW4a6csdD/uJqgKPV/+/Zu8Z\nk7HkQCOjFLRmIVUiksL3ZLozIzKnhToiUjv6/L721oKWPeupfS9wJ+Vn/5UX\n5yWeyjI4HsDxltOGRybfRDsvhl/WVp+Vp1T7PyBlpo10SPEJHC/iwrhJt9EQ\nUAUP5uNQsNeslWaQ28LOuI7NZ6rzW7F36wPIcXUkjNXuHZ1t3dBc0VAJcXOG\n9wJ45qQFnvuqRi7KX73tsR4pdt456Ai21ntycuclj3SDfLQDFrK1uI0Mbl1s\ndJyfRGZOK+9axH2awBCimJZdWUyy+xnuaHbhLioiOHMAE2n8NrZD2yPaKrcS\nvcPMcSpuMdu713V7osIQ5prAeTpIN5RwiZoxO4dpQOdyIdQTbHJyH63ThD+n\nG9ZM31tnkRj4wTsj35zi9n3KSzyHiH1lVlGSK//TbhgJri0bj20nrVjOA64I\nNWD1666V+5f3tabjeMyZBEI1cq5I9AlmNmxIUSKr0SggdehWO/gctyi/1VjM\nxLaF\r\n=MBNo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ba30399ad.0","@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/typography":"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/floating-label_5.0.0-canary.ba30399ad.0_1576804181399_0.021208667589843744","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/floating-label","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"31941a4047cce16b04bca00d548e9a8ed41f06b4","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.a08ccec35.0.tgz","fileCount":30,"integrity":"sha512-HneikGXYw7neN3aJR5ZiepCq12CVz7+seeXQEe3tfbjMN7GoU9gihWbDJQT2NvmJNWFGGK4nnaZpbfoCmO5jwg==","signatures":[{"sig":"MEYCIQCLbraU37nmJH30Wakp6eU8VIyTFmTq7gfn/JqGw5EmtwIhAN1VOP5Argl/89Kebb0Oa6BWfRGDgOaK+VSI+nZI9LaH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/Vi3CRA9TVsSAnZWagAAzCoP/0epYVXrUdvaoLN6h8U2\nDs8eypqvZa/jJIdfpYPx4QtT+TMQAm/IlbNN/ZrthoGdk0W8pVBPkUqlj5X2\nSRP77AS2d73jpAypmNNuXIgOckR6pkscIfnqrWiJWqyNtr5Msbb0M2t+Rbu2\nlYfkx6h0MYOHKUT2o9I5LZNRKweQuI91OgJjXYCvIhAONEy1tlSobzKoCE9h\n7K+SCI0yF2YDx5tJrGSyN+BT46exJv44sqcirkSJdFOHyRYMfGsdk99lM082\n8E77XWuRWbavKmi2e5jBkpl0YYsXk7cJaJgBn/oOYaWYscKAnervHVThdMWN\naasKGxvK4fe2UzhVD1oIGOH0DZRu0NczS3NtHMKZs/wB298tecs9dMJ+WfY5\nS92bCdmn3LkLCMc3319K4UBDok3U1nb2Pavi67efC6HGGjFm4TYrYOdWMmo7\nHwz2YslMYDoXcYAKR5xeKX232SzpY2PSFdOF9V67yxS0UwIcQAsTuawpZ22u\nv/5f0i7w9/1Ah1WUPT4kKqqdZ0cvrWk2tjpB7eczdLMMM9aYF6P6S/EFlPUP\n7Y9BGQSzgiwvH3jQgnQ3kiwkinjUiYf1PETUfL6buy0javgweWGFlG9ZSZ09\nzmJLyh2kOC+0ylqYJlUbNs8p6RrC37KP8By6a3DBKfvlLMu2cBGjL2ObAKCK\nK1pR\r\n=psGe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a08ccec35.0","@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/typography":"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/floating-label_5.0.0-canary.a08ccec35.0_1576884407161_0.5544051629569582","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/floating-label","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"052da35715d62254474284695afb5ea1e27a64ad","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.a2f75105e.0.tgz","fileCount":30,"integrity":"sha512-wjyjHA5WGX8xvMrd2z7cXDONugOE0vAio9EHqCN0wpEYWL+VQCQ/FxyY72xGOsKjoIiGPGX1wccEJg5v1EtM8g==","signatures":[{"sig":"MEUCIQCzV/do9xiC1OfKb0aLD8+TpScbdCXtsPCGutBSNFhoPwIgDrBDt2D/74fKlM62ie7bsIAJlQBLxBE5XToRgB1tAxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARnaCRA9TVsSAnZWagAA/9wP/1Qr+zO+C5pj8oq5qgXa\nOjaRtQUVOGanFNdDHTq7iscnLrxfJOBaUiUBmIrYXN9knQfT/9f8+Lma0V0/\nTKzyyVpIhKdUr9DAa2RnJ+PMe75H4R8uVpKJ5+vtuHCyaczFxaOzqzBiRuEi\n7RlwMLjXpXGwSjs4Dx+yj/+MpUg1LxX6dT8t2jPlJKMEQ+NWph5busIHDSES\nrQqcg+WeUmYYbQcs/pcyLvN5NJh1Gxy2VOhTzDXMH/nx4daO04dNRZYP74WK\noYQJZeU7a+Yi2Itu91ZgD5aPbW3qceZ065H6v+I65tV0y9Ax4i58SXnTMv+D\nPS2+IJsWTA8n6VarhwXFqU3vSX406OVJWYy6pG/G1OrA0LwaVxp7VVSmBqCq\nJwmloy+tVzEbt7TGrrZgwPnH33wVAlcGoy/k/CQmC2M2rs6jQTMm3O0Pn5cY\nXRVopwIlQV+31raSDv5Frbf6Om5fXoZeJ8Hj/6icHcobWTLYT17DnHjXPckU\n8fn5cZ9oJJ1do+/RUe2cEdaCFr5NEEzQPF3gjBrWCeSLizDN+RRd+TFdiGVC\nPWLdE7I3FMB3IfGKlSKBePXA3vIWPG7s0Bmo4l3Y6st8tODgsGZMxYhAQCOs\n+Z0Fuc2i0lLKlczW6IDqxyU6VnqqoPNQloWlv9QaQw+Op6LuJI8qC2PYpMHY\nU2y/\r\n=/sJe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a2f75105e.0","@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/typography":"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/floating-label_5.0.0-canary.a2f75105e.0_1577130458133_0.6502373053402033","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/floating-label","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"f81b6484e5de706002d083d2b6e4541e5d2ae6af","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.c054a24c7.0.tgz","fileCount":30,"integrity":"sha512-QdQfLHmN1GJfqCLXO84GVBismiVJkeHm6EKn5/meE5Ub5L6zmBJDI63zg8WwVGbPrpH5281dJaplOVfFnQ2UJA==","signatures":[{"sig":"MEYCIQC+lb5iRxohWHU/CHMpl5Um1Ly9F99KPhl89aP+fdJgVAIhALtNe5pn3mt/qs3CGE2TUTsAtDVIAfQMuLybArb5jH6L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATaKCRA9TVsSAnZWagAAnBYP/32gW8FDM+52QRrFRSrW\nGdibNF6ataj4JCOigzT93uszWa1XHhitg1vOZS2lMGTfFFq4lP7N5ki+Mb+b\nDvfGfsD7rSXDi/pSddPyI2ucSCKk0FpAJVhfk7/dqwwXcEDIXyiZIMOf6d2w\n+/Z/MUszekDKxEz55kDTSEL9LH5C78GlUw2h67jaW8nr0AQ+8lRntRPp1TFg\ntfwcrvJxDrO3vNzI+JrOImELv+M3/Py/YpFU2SNQZ5i3OmJGVe81lz2PdMUC\nU1/bC2dvnSIouW6LgIFFTVMVqjHtsOXYaZviwYGcUB9KjqN41ZQEolaKFanG\nb+qBP+yQm6VlImTKPyRdimnqRy6YmPsN7vxVAcC8CBN06aMhzyI5UxhAXRzZ\n7tjmMtnsCL18FjSLY1Wgt1fNfuUmbr5+JX3r9WYB1XDXkWngIWfkL+wtoq+4\nOr6X5rVhg2mHZmdnIyj29quFcv1aZrJE0Bjxu6UoRWg50b3Hm1BSK2UAUcI8\nzdJ32/BaZF8UQBToC7I3zv/Zo4C/EwDJwLRHoA2OBZqMoIwc3DKaLilGpDHl\n2JZk13iJCU2kP8jadyARClGn9fHOu5ZKdUZ6AENyFO76rliAoNJ2sY/tRcyB\ni2xl6W3A0PJGIdtPHdUhf9+iLsvCvEWT/tT2QTJERlHHOjeK4Z9tzntKpKe/\nu02n\r\n=0dK4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c054a24c7.0","@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/typography":"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/floating-label_5.0.0-canary.c054a24c7.0_1577137802111_0.9728177682772539","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/floating-label","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"3467f9562c94ad1e54df382836d85613c6b52f98","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.c6808c51c.0.tgz","fileCount":30,"integrity":"sha512-Yz9rUvm2JDQfiLitEwBBkLu9/Xkt85v9fRzXDaCkGFFRkQbg2MPl7OmJvDzlwjEmij6Qqpw/VfblX8APTx/i/w==","signatures":[{"sig":"MEUCIGk0eBSqubzPDSjaCZAZ/kS9AD5dt3LqxZ+t4lub/E2JAiEApGaURFL9H00LITuB4xQ+81sls7wFk+aKXegs7lOohsM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATefCRA9TVsSAnZWagAAlP8P/jl7toOBDtwY3OplgzQ3\nPRyxJkVUqU2htQDLRhXQNfcio+gMLvybLnGt7gTLZAfm7bDSChiatg+ZbJnQ\nEJfKAQOvt0q971BQ9FsArz1JRNmBq57jwJcglw2tICoEJ4aeJc9Ji7wwNN/v\nqGXo+v+HHbvbZzEt6E0c4aJPZ71oVLB0LIvRSYcR8kYsCFJDa93BQEJAtoOu\nbctaIg8TFxyY14pPewLv4mMLjQHjDdJHoZzQQjfkyCl5u1OdLuTArIEciXZT\n1PjQRzV30gpI4uFpjLes7VbfKNIEA3c1dFH25d0fk99s9AdY3OmHvqEyAa7C\n3VYteJYeFaXiyWkaO772sabvCgcZoYE3ycObsvZGq4BVa4ACag0F7H8nw7l1\n9gRFPohAQRK/6SvGr9exSM3whYhwYlhDe4P95Vw4XiHICn8jvggmPNHbzPH6\nv9YzwUk7cedvolbZznJ6PSgWaq+KFknlgvGUEql0xZrC10nJaUXQZyILtSss\n54z3khYouw8LVGhFDrsWyPhcekHd5r0a5yDJOUDxlMNiGKDJecbO1oCdI0pD\nu3bv4Voxi+QNb8+ZlqTsoB1QMDRIcOyj6Vie1+5i0K8Vj/xS79WEuGnZa17H\n3YBPC84IZeQ+plOpN2wYSodVoqza3LphbGYC4w1hxgFWBZ5o/xJSbgxm1Vcn\nSvoE\r\n=gr+U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c6808c51c.0","@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/typography":"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/floating-label_5.0.0-canary.c6808c51c.0_1577138078539_0.7640660131553352","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/floating-label","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"f220aa4ed692e35e6b7634b34de4776a46fb1ed4","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.7bce9cf77.0.tgz","fileCount":30,"integrity":"sha512-m/HjbeqaTuTmkNvl+gOxqvsSPfbjKhjcUqBNedYsVETosPMeQybCdbuzHglI73BNWgn7dfqZjRZnKdJqVFMZpQ==","signatures":[{"sig":"MEUCIENrSaeTlaAFGbuslCqbsRWpwrnmP5qTZ8i4w8HKyHrtAiEAhdHAQNDK0GYjHcXsbzYFK6Yrg9AgQRxbT9Zc4IzFFXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBP/QCRA9TVsSAnZWagAAoBcQAJMNtvLdQ8rvuJFYGS+N\nlUfp5lxKRgBAQAR7TVSFIFsTzJSQoVZn+i+BC3cu3CqC9rKxoLhmgptn0veQ\ntCIsBPaxkY78NY1ZyZxqzwrN73kA+u0P/QEy50uS9ntG2UUfnjjXVToG7TA2\nsk1d9GCu5mX8zzrauwkOZbwShZMRUjVCeTL1e3XBw1Bk488EYlIdFT75quWW\nsmBSum0lIlU4ciRbtkvwRtXFqQ2mCyDQaay7KOcyo8DtNA89D2rHwj36YrXB\nPcBQgJa53y3xfHnHTVE38VeO7VPbOEXqmmpXpi6ysLcr8LFwQ9RjG4On+5aI\nckJY++ChPJ4joo136EgLrCbk8k85f+1YwoZd35pQB2xDTgULB4lcc5xItaCs\ntjJa04aiVvOGexwSi3chkAV1v57r+ztzKe0FyDx03AXjzRUYxgaWgRExOegY\nDFhLThzvNCjmN0dlHuotHf9mZFRMmkyU1Yd3bPuVa3fkepIH/vhP56+JmmXI\nPgwQbpp1XVJG5Unqy5hYOKPMjbTvCqheVuqIteXk1cozDmpTDDJevDjaCRvU\n2SGcj3c9+BrDa0FrCcxJSdIuzY8s/L2CvFcb7TWp4WPgXGH+xlgPSr7nXmnm\nb+bPnaCujBww2OWGi+YlKt/XwnPaza9gLnW6UOY95OkoT9HuOQtmkiveITtF\nWUCt\r\n=XxQa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7bce9cf77.0","@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/typography":"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/floating-label_5.0.0-canary.7bce9cf77.0_1577385935780_0.3171907886370231","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/floating-label","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"d85708b67d53372e15cc99db8c2a0ef831cb02d5","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.c92f038c3.0.tgz","fileCount":30,"integrity":"sha512-lST9cnojvJahSnQl9KnDcnGMmtP5r1B2+m15FRFM020mNT7xxObYH87ArEHAARpGXzQIKZ1c5XJigswnVqxDMQ==","signatures":[{"sig":"MEUCIHNJVm+qv3CHH1zPyzNS6CJAoizMxmx/PnqF7yO12BrzAiEAzHFiP3CJdfswhp5stFWR2h3HOJoaIiNdCuap7/EbiPQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnQWCRA9TVsSAnZWagAAgPUP/1cknndTLtghSdff02DF\na3yMkalrJ/9yOKWty8Etq5AHx5pq3oPMAgLzcEa5KcLPewmI4V7lJG39jL5h\nBedE+zdRAbHpwimVLzuvY6i5/n5ZwL8+ti/DzxmwxCXf4HxvR3tHWJprrRmZ\nvTFMqu09eI+uf7MyhzToQmQkIVYiokwx3wLDVRoI2HCpudBPrmBJjMITfxt3\nKU5uYsiEEBaMTb+kIOu35FjNKRZs/P773SnR+JBRIFCmc9j09t12qUdUdb/V\nW7/gOF5+He3hi3kbw8moure40MZ10hMA6EY4fjDUFZ+5lCQF1MRNGLp/YaTA\nJJiur3n72xwCjyKV9g3JSJn6ZIELdXMhjYPGga4H5ha0A40kz4ikeylBbpA5\nwy0ly056AFW6OWd3HGKjyNgJKCks7+KA8xRGY0vfFCoRAk821A0S1gFp6uwo\ngh+iiwtjkOWOzCgr+Aq89Fi+F1Yp4yuiz3wcjhRhF+0/FX/jlHBJvKVoyt2x\nY69d7x2BcY7ceRspu8qIQHeIiA55vz92MALOz7pJ/ypYfzqRFsJUNAVYtMrL\nIj3/uS3sQe6KTU2mU6LoQ0tJhtFQy5MlGLq8JDVt3ebAj7Nk+TLbgQVTQuJT\neJQD6J96VK/hJiSSSTb3WYN6EOPprrrpwEVtjRi6o+zw9nqv6mjwXsAuZOTA\nNiW7\r\n=MICF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c92f038c3.0","@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/typography":"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/floating-label_5.0.0-canary.c92f038c3.0_1577743382163_0.40266830962657885","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/floating-label","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"979a5baccd0d240340b6929b67d9e1698a7250cc","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.1f1ac7558.0.tgz","fileCount":30,"integrity":"sha512-Pzs8R1L2I5++GtNVJRH+fjFzQFculgbtrDnx32KGCWAb5/AhKppOcQ/khhqwkhJ0SxVnTWoU3utyqDk7FN9Few==","signatures":[{"sig":"MEUCIQCUYNhxpz5Wvgq+sYiDaEIWMqtabHMGWugNynJ/D8gkWQIgGHBQLe0bhSBg0IQNzs25bZ9oj3esv539Y7IQdGagv6s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDlhwCRA9TVsSAnZWagAAWpEP/Rdy67rQ9lwBS7XyhAYN\nBuOwG6R/5OIHGOzXkHB/T3Q3sLiUa9fmMvbZPNTFrDp4ZU6+M0o/ywHEF3e2\n1U85uuIwflGn4AW+cCzrXfh3n6PFJrjZvcIEl86S1CrnJQummXSmCpQ9msrw\n2Wdf/T31MYkoz7k7EP+kglQXCQNLNuuegBqHCqJvLEAp2f3YFRGAoN8lVwVC\nPNTzz9Pcn0SL36MQead1HoeY7Yr4aJ/jjf5w5EABlNwU58C5kozs5O/59YJK\nqJhPcDDqy3RETJynfaUNwQKupa98KE5YL4FHO9rf5+s4HMh8i0jBq4bL7ii3\n51WsFDVQkVZjpJ1oVb/7PlE7EKdYdgI0xGLa8AzU7stkRLbhqxeKOu63Mvab\nNDrOxN936dPHT7azFgJQFp1JXUQhqOTiZmL6JQiC4sPW9bxaezzN/HBdkjLs\nPhGr6dfajDrqZgYG8qwhKxEyJu+9+0mlcsFHO9fvFR5FqZsk60MDHKqk6UMs\nQE6QjENEv7bq4kOqV7aIHUKv29429l9EnEiO9aBXBlk3WfZgC1ADxXj6cIkl\ncU8EOIRZeG+bX5DCNuPXfFjwcqGViM3B981lxDDYhzAR4522Ab9z2wosFPeg\nmxVjjtiVuuQwYbvrque0BjtuyMYoGC2HdPFxKzs20caBRNHB5ndOmxmL+sdY\n6WU1\r\n=oupo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1f1ac7558.0","@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/typography":"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/floating-label_5.0.0-canary.1f1ac7558.0_1577998448425_0.9218499463101242","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/floating-label","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"903f3ec1ce3ccb00c7408fd1eff64b53f429e114","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.ec26e799c.0.tgz","fileCount":30,"integrity":"sha512-Q9vYKXwn0LPWijCuE6WoXvQbzmlYvMSbjSE0HKM57uQ6CR14YpcbOsrhHkwAf5vBWeXXuVLb2uKYvbnox7xXdg==","signatures":[{"sig":"MEYCIQD+JRpgQcYf6Qlx301T533JfK6nynUA4aIo5c3liRpyYgIhAKSH1o4Kfaktdj+TpCFmY6u/V4+Bi1lrDKlaqnqFsuo+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmO+CRA9TVsSAnZWagAAQe4P/ArIAwDH8dct5YdxTEQm\n0nRPugwgbJXpzvF20KQKIuF8MZMaUEjZ/AEcVsN/hi15Vsi74YZxAHLZvNFS\nTS7DTfrPBW5ovsXHaPCJuJxlE1PWLo5xeG+EBa8cJTYXIjSaR8H7hMLQFXxr\nnLKCRdBf+EiKZyd+2NoYpq+7e1w0clY8wx0QKAYXnL7pVv3xyk3tEYsPZhyY\nMJ/tOJrcyCV9nkEywuxIbpRQ4KLOz4kx4UzNPvOSwBkYToTl0r9fnHoSgDMQ\nqygYGVYKHkBH+lxFw2FlJZ9szSDifTtJG7UqpqIDk21MSdwaIzyaZGkCFCh3\n3UCp8VFJljRH5rafP+iDjfFZUMARcjBouOYDcQyvBJoy851YUy7PjabmZ4Hx\n8oXVSGe4DNeIFkEcZQfhfVxQdaVasv0FY5oYvfsHXa/xFCAwSNp97zBUffuZ\nlqbCU9u4qmOnn42mzZDRV5I5REZL6nKod4CZCIu1faW6vu+qaFX7/ky6Xjwc\nc5kBD2ykuHp2WShdH7Okp6pBDG9Rw3Vc3OCQlfdyfzHkGCBugBtcYEYJgQ3x\nhXM3EcDd/207CSz8DlIDmwe0RltAIgHYnIEbWhBkUZFe4YwsF79MpW+sImTB\ng0CA+Ylgv0NofzJY/unFIbfrvSj+G9wYUWQ1JmV9wRj2BIW+nIeTfHC410uQ\nWl8J\r\n=rzEl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ec26e799c.0","@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/typography":"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/floating-label_5.0.0-canary.ec26e799c.0_1578001342550_0.0064144712882865385","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/floating-label","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"58e9193b6d6ca8705910800cc31fadca56cb4a58","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.0a40ced40.0.tgz","fileCount":30,"integrity":"sha512-uQVjZQbDx64D9+9mjO2+9eIF0Q9TBe2qQAS4X/yaQWifJOMBEjgIatC4CxYTPHQVr7+TSs5az86qdiy9IXSEvw==","signatures":[{"sig":"MEYCIQCQUAd0wc/AEivO3BcXP4AzLL3TOV4s81AK/7P1iECZhwIhAMR3zX0NCxfS7gh+nooJtPHWb54Nmltjev0vDieQjkUH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3VGCRA9TVsSAnZWagAAHYsP/1qBT60TPwGmUCQPi4IE\ns0K//t2pJhun+dCuFSUsN4PHjO3X+Lh7pszr794RJhVlFmoO3IRzCcKTI36j\nqY37Bs65WIteBOLhenO74mwIzNBVW/mqdbTGIOlMPWP3KlqcHcoCsKme4g+H\n5w6SJZCSM6NbiL1GkDbhGDBhHOZO5kFHupz34rAmLfWBERiCA0oyBkfsGnpd\ntmNEgwG0heW1fP0d4vqpUAFRa5acT3uhPE+bdI1kRGt48gh1wU4jzD6D+sEI\ncKnE/OOBbZQpZ1wMSFmxViypKmB1lYrI1gIs5FFD86vZtJXWc9dzc6p7ObNC\nFcjkSiHGep3EBZeqtGYJvN3nWq3wB74f6QUhBzkVk7+THioq80Bs0akq2YqH\nhFdyDgISUtT2NKPKI4XK7ka0STINHpbJy8vbWlNadzIFWVKmAIeX1H9eH58T\nhOgLHuU2dYfJWk8UnGQuQouGeCpxYCxkBdRxali3Iqt9ZPcUgQAbqcplvyG8\nwt8MIT3RAjgVkUtWKxH87YDgzzw5KftYRoyQxcWWr+/nCg/GGTLOKLfk0Vsz\n7M0T/ip3TuaEf8nK7r3G+bJWGv2xK9p/ag8mTdzDwz5o2f5jWnDxhYHswn2Q\nPCJPVN/sYBfmmIF6AakW9RqlrpDTC0F/kYwjtQeNwqV0tGrLZlcD/7aLloYc\nPcn2\r\n=DOlx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.0a40ced40.0","@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/typography":"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/floating-label_5.0.0-canary.0a40ced40.0_1578071365735_0.4820727831639904","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/floating-label","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"9492c95f8cc05cd9e48886303903eba96bfe5100","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.3adf84899.0.tgz","fileCount":30,"integrity":"sha512-V8C3ZEIRWvbxGSAyI1AMhioHw8u0XaJi748M3h5qP5dmrqjxOMcgXgqSyrRZd6Tg8QbMKwywRi+hahTrfDn/cw==","signatures":[{"sig":"MEUCIAw+TM1QzvXZyGSOtYi58jjh/48bCd6zHsimIW/+440SAiEA+G+vaBIwFiW2LNGbfZge1ZiMrP9suKmtPH+K0aY/bms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4ZiCRA9TVsSAnZWagAAovsP/3ro45BMzqGCD8MZM5kt\nOYWREx5618uB42ugr5NuKpdAfVZf06pVyYozS8RWrKyJKaFnRwQD6E7ds53i\nWE+qFB2NSM2BO9JNV0ZMs7eJI0YtuonpfbyI4kbBLzU3SnL+l/fYTjlPkyhR\nabe/I++M2jTfhxKziRFId+klYyYcNzhdU4Ey0awFxEb1U5rLQJJQ1NpqhsZC\nqFnL+V2dDEVHab2gufydIliYdV5EyZQpSzCj8o7Y+YwxlW6En0FASTaKjcqp\nPx6yUxT8zudcle4ZHJOwNQl12gYtjRKU3ykeQsmrpSH/nXVlzF4qIXPHmwnc\nqHWBxRjpXQAqfuGP9fdiFp/LIds6OF5P+nIrrLDuenNv34T5lZwPq8LQItAS\ndvQ6hYDTrzNG1YC/n4zq1rfX1NkI10qq81/oNskKCL7KmdGDKq6GFxxEguC3\nCkda7+xuSA8LJ4En5mtn48hjnCh4bsKS+8ebwa3BXpERfHA9o2pUaizuXWpd\nmN9r8fux3/5KYVY8I/HVim6wgpngWLl8fBw9jgHJGG73hHVBHD5wNKmj4DBt\nxYgMmpMN8QCv5blC5+MBjrumf7xAGekkfsDqE1mU93Ci1IRW4JVmBGKsfXM0\nkYJDcozJnsEI2EsHuHUXIw/IySETk2v3aWUQGu176HL3EmkU/53Nk4ASmRnZ\nsrCO\r\n=ATwQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3adf84899.0","@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/typography":"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/floating-label_5.0.0-canary.3adf84899.0_1578075746047_0.894084813076333","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/floating-label","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"9318a60322040b52a5fa06301ec1a7e031713422","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.0d42ee650.0.tgz","fileCount":30,"integrity":"sha512-Ir7xu/7+dMpVNh2NbgOEWmMnsnHVTdr06EJNHzDSNyJ+3XzT5A9abaHhQMpSv2fOKwAhlQqsMXZx4KloGL0LhA==","signatures":[{"sig":"MEQCIEmNj20dwxnQJBfuPsHOpQ5YmLX3MFihWkR6ssNiTNyJAiAygwxMGYMxTnYHEYTnk2r4rvVNio1uaaDX9W/36Xqulw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7P8CRA9TVsSAnZWagAACvUP/2oFJQjkmYEivnxzeilv\n7L8Bpp0ys/8y2FCFKSoMBbChxTSUEf9V6dCPEDi9NtEnKiFTVw7m7urT69Rc\nK0QLyVF5o41TZDFqR2AsDS+uiQN7kpO3eusYeA5/F56NcQ6hmowKA3+sgHgB\np197ILNrlfbE/jCsLcv6d1dOTv5Ib7WlCHlEf0dCuxCGHB6uQjCdSrrop4oC\nHXUp8WyY0fv08OLCink4vPYrPypu5QOlGTdw1z+cbYPrTOgIgEYMwZ0uwOlT\ndKko2U7L/URos0ZGushKGiQgXUo7x1ZQbQZbvPMJ3E6xAgIKnODLtdO4DQpX\nZ8gJyG0WyERYqyrQswMXUhzLtWVrRMPqPl5AOroRRobu3fk+K1Mt4iNGAUNc\nPu/xiiK92j33oR2g12Bs9rdWloSwhk2FN/6Wg8yWVjMVtqM9fdvAbSUpgCl6\nMj+p3TNNjHn5gEFIA1ahuGFHmFLBbRSBLGxf40xX84iEXjMlyyk/D7TxlKPg\nieMmDYesTtTncwUjc2A7FOf8mnOIWv/jrJJiIrJ281f7r2yzLynLz4UTEvt1\nrjCdLfoXszS8SV0iBVG4UrNjAjfB4bD6qW3+EMxphTPBS6Noz1F/oYiwMFIC\nbnozy1FliKNUGtC74Zqg1y7C4SJ5ab9/6cAPGy/nc1CscXC3tRqD3K23QHBm\nsvUm\r\n=QAOz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.0d42ee650.0","@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/typography":"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/floating-label_5.0.0-canary.0d42ee650.0_1578087420491_0.5804168990257783","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/floating-label","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"f755dc5d63328820a96b8abd4dde57c7b445019b","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.847dd1ada.0.tgz","fileCount":30,"integrity":"sha512-tJZ5kRmQFVDmBTfKWqkmizh48KaBL4ZRYV2xDW8Bxv10fknlYR2i0Df3gXZioSp1m2Kib8piOv3RLZiGjIPhiw==","signatures":[{"sig":"MEUCIHmQgw/ECvCTkrcUyI4p+kHqNDuSZcyluxiEqrZyWcDTAiEAoIO3dO++IwokM+gsF3bu/DkOWgl/4+IlKVyoTjaJ5YY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4nZCRA9TVsSAnZWagAAog8P/3pFOINk08aZtSLMvxFV\non8LezrJTr23SHPh5KErPC6A+lt+u8s0IQow6yfFegSey5olqp97FiMKRiHV\n+wk3E1RFx0Qf9CoivTn0xsi+kvSJTSZADlwPCMLAEhO2x421WNcvcWd/0VkD\ncfKMQc3oXgOlwt2eJZklK+Ku1RhkiDI0RCIJZTS1OAJhqUFaUiailcQHvtyZ\nkuHjCgUhVgutdGMzmPky1dgNl4k+P9ZwoZxEPTIUNMbYXgNVnxNx5q7ydaZv\ntMft0mFLBEsE1NYx+TH2d629dmMaIoZw/KpYhTnpfcUB7IrllUvaDg8SO8rL\nAI9zoFGO3VNZzcV05akNLLPkxeixo55v+IlQO8XFx4gCR/c2aYpRQnbWW+3X\nc++fWwUtI3RaqO2/fj9Kulpr8VNy+WkhRWfzEyXkYGpcETmuAW5aV73dRq3A\n8YS02SwWe2fpjcpU97MQHG9B4Iq07fUtue1vdgxD84PqquMGEKxt6ulwjEJH\nGd8JGchQ4PBLfUuyOQwBrIOd3qBNeK7h5tXeSltXHAe7C/pEm4OmSWIP3g+x\noSFs06wSRbrKV/KHcx12MzJIUfJ/Muqg8gjwupykIvmxiy4ReTBGa9BEERHR\nFtWdfB+M9oaOA1LYO6zxwcIYl3xV1uJg+6/8ck5VidksmxLhPYR8aw7rZUIR\naRrA\r\n=Ru5i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.847dd1ada.0","@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/typography":"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/floating-label_5.0.0-canary.847dd1ada.0_1578338777040_0.1028650102819626","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/floating-label","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"522543f4ad384698403ef47640167e06ceefab5f","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.39df7e5df.0.tgz","fileCount":30,"integrity":"sha512-H57cOmt8aaDsCjTYZtMMrjVXjtAZErIF9M/xfb+6sQx+iCtEK8/lzNVYNkj2aill+biMsYJzr/MJKq/9WztV9A==","signatures":[{"sig":"MEQCIE26KS3ItkQHzXF7DA40aq0gBZ/CpKK4CKMp/KDYuSLxAiB8X9xSilfhYpA0dHsgQh2EqT/CUE6eLVxow5YpCdpiYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9b9CRA9TVsSAnZWagAA+DEP/3RK8bmkNJ5lzf4qNX/B\nPFeLHgLwWStR8bzLnB3IfLLc4DX4zRe2mWob6C7X+bJdzuPJC468rJt6YgPk\nGl0z3EojEsuNj1F84pcHxkAUqbJetl7PG5VoF2dIDHzpu9PmCPYCmBUGkm2V\noySbqK4zcFexezvm/i6eMc9nsVnHlGmITiFHHf85GDJ11r7xcXI8DspMAduK\nWuIFU0yT7AusBt/7EnEZMcpBmjz2CjY4s9nCqUXyUy3/Hvkfh3F9+pzLH8VD\nJ8fn2LBUoPPzV330UH9ZzJiOwXy44aYSuHiNhFkjHc2yP6eiwB+Nc/XdpnOF\n1Po1tgRmlGUHLeDDaiaWGwaWBK7eUODcRJQsJinwlUyDmMvtlQ1ax6LTPuYN\nXC7R5jvQfhRmi/gEjm7R0IjFJWznetHXuadqaSLI5GabGBA7U3b/0sjlkgZ/\nM32YEf86K1os3R2sT0WOD3YkYTVlW3NriNM+h3qYIXBs7hmcS9kuX0O+Iuk8\nTepWLgDTXPjZ6sIxjIvuPSLg5CR5p3ptb6jzFTkgifPGuvjp9OlIsCYH2/fO\nA/PRhaiFAxONfcJI3i5/gchTTYcrrVLAD5hhjTG9G0mt4eBanynPqHhBOq/t\n2GFppAj6ljPmnwfX2mcpj2/ljBihbte+YLoFXQiRM7Bo9dtS6f9Cf9TRoRjm\necPB\r\n=AD+z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.39df7e5df.0","@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/typography":"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/floating-label_5.0.0-canary.39df7e5df.0_1578358525581_0.03806694158534474","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/floating-label","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"57b7fa35ab3bbab11a9885f9e04c59e21dae217d","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.f1a2581ab.0.tgz","fileCount":30,"integrity":"sha512-qg4MHbAvCWMn2HcVPqgdLKEBTkilN799piAv9oA7qjImbmdjgmcbY3D1hfm4tceI7bN3msIiBVPQ7KYV+2QUfQ==","signatures":[{"sig":"MEYCIQDirN7Ay0nX9emtvZxKcC5p2phwosvwFlMdgfXW5nqnagIhAN8DAdfe9BumGWzIP9tx2dg/GP2W5lsIuMxteDC8pPwZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJzTCRA9TVsSAnZWagAAFtAQAJxQlc1EM1OPO1EnN97t\nd1brwVc4ZhJvmXUVjaxF/AtIuGqB/v/AgOY5MY8gZ0YHIwGf6edlQOvdiuMX\nIGOvuoQpVhNx5Ai2Rl5HZXYIO4KIXW8WGiLacPXxLzNUMUKfVZ3TvBTsUb+f\njEvVDNojGjo90iYMQvGQleQgHBLRMPbuYtfbZu1h9QEQDtCP1yt3S7GZ95Gp\nj74uWOTEHxk+P2DobkMwm8kSxBTm/M63wUWWdqTe0Nd+izKP5yqx9rzKP7VH\n5p7TKXSPckoPN+h6TYb3K9BDEfFsvvpyn+NOGIWws0Ej2hMJpZL6UaUyLf4W\nak0R0OppB8Ji9Tz0AaOixT33BPPUyDrPu7phIOudy4nMK/c2QTcnezsLk2+S\n7TRuYfN/i0txyDbzAkJVEwSffDsdOtxV3Y03fc9pCmo93+JdSXtQYipFvFdu\nXaW0qWFXkKtM4nJZSwnRv0TkzwWEbLjkdCLRUUIaBZgNNyHtPwBpufV5LXMf\nf9lmfE7F6Zi1Xgv4ZzY9VVkJ89UepoufTMa/kbPdBi0WkBIGxQaMcXWRe9Lo\nSh4Itd0c6tgKawtspQG55Cn9yWls5TEyU1HokVn/q0cySqUopT2+Z44v8270\nDbV5lzwugQAa5FYuQ84s//j+P8UNgDIYw9VcpTqEeUZzQ9MXHJLmyBvfuLPw\nK/HZ\r\n=suwH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f1a2581ab.0","@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/typography":"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/floating-label_5.0.0-canary.f1a2581ab.0_1578409171061_0.8928117684039969","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/floating-label","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"362b926cc7b554caa222175c0b36dbae5db49572","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.7c7ddf347.0.tgz","fileCount":30,"integrity":"sha512-ESS5O5ssFFhtGOISoAeODmHHEhuFxYin9FzBXwJY5WGbqJjrY1Tie701H5oH10pP+Iq+Ivd0P6HSUqzbRDVHBw==","signatures":[{"sig":"MEUCIQDXmYzF/jEPBTeViXC5IAwFTs3z7rRSW9uMYws3tKJEIQIgdiVK5go2r3tuOLHj4h1qrWTD3BkbZ9k3bgBi98WAyL4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKCrCRA9TVsSAnZWagAAhUgP/1gr0rFtt6NLiKWbboOr\nNDTJlYc6rxeZnA8q9N5TKhvZuSZCafbrNP0WmJXZJPmZC0j7fwr2Cp15n+LH\ndsPfz8RKZsM6hpqEscjZvXOJJvqQUJzVcrXhqJjJ/N0wuSIfv1XWloaIXG71\nMcDC0eNOweXeJpHChOZSj1Gj054ADE9t0+GYFvDd0RjPk1Hvxph+2vB7iKif\nZYrpdZ0sWeitzq8r+YBWQQqe+SC+9w0oDEtgsFZyd3sySEfJ6C8gZs9N3IAb\nUl9QARbJ6ynEkey7HWRwDW/jfc/FtMFuG1jo3qkmhWdOTW2odGXwtYYJtYDH\nxBJN+E7HUaYOhge5S2e6mIjJbLtIcmazTgGaV1PVgMg4EZBu4LVR6ySCbN+Q\nUhkY4xXMGluZJjMBRSYIPRS0ZNV0D6xR3E8izHk/+ip9+OCL+gAWF3Dh4snt\npeHlSYn47EcIF9kt81LY3WJXfJa1IngNrrdf2M6UNPQS//3CKGxJVvIp0uyR\n4SKT/9Fn+RMPNDdc3QdoxL7B6ZDQV/ogdPBY0EdJCsXABkRC/ZFjyOGomJRC\nCYrXd17ETw9rSbpuhLktdvOOFBAqHqcfxN6YcDsQ2yf/5e1Ntehckwo+1cmL\nIjO4sq0E9MQgoNhh7yLgagkc3fVt2UJW1wXa6VYzWIEhQZAEPhrezkS0mXL3\ngGeB\r\n=cgFv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7c7ddf347.0","@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/typography":"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/floating-label_5.0.0-canary.7c7ddf347.0_1578410155308_0.8532218512069398","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/floating-label","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"02b6f93153026ef20a4d536a6507c590643d013b","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":30,"integrity":"sha512-LwBm9GBbMauStv2uQnRTAFtxS1Sy2Tnxupg4IaYRSYrSO029FoVmZmuGXyX5zV1hkvJ1xHjSMaKi+l5YbNBn4g==","signatures":[{"sig":"MEUCIQDzsccuhiid6m7s5fH6IY8W42rCcvJ0//bwCFWm77PIegIgSgh29A6xpzDC6sIfgriFARQhOEuYEUxVvV41VO/B2EM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMl/CRA9TVsSAnZWagAAuCwP/iJD6j5g2Vrk/xiQ7d+N\nvXeR6x0VTlcDFUZQ/542iSouUuv5VVJM6htW1GkbV+tOaJUVDYNxlyFp5v65\nJhLPl9PWyUEOat11WBp0VkIXPWAA77ElzAMn1FapKoEq/mtIYIeNs1YWk97Y\nSx+lV1xN9fZdjRi1wk4GBcBZPBWexIZJANQmYk7BcJ0TEoiwOMrdvY1R8g+M\nZwMeCoP9uaAJzq38koaQI8UlBXTifeiOi7qEAO2rKdSL7R4WtduwD4gD7m3f\n1vuhWE2fNXoRVdMK+B1ezrnD1/AcmMDNT1DoqT58tV7/+zO2P7tyTu2ryKgm\nNIvc4K6ZjiV/GipqMIN7HqOW0IucaVdvE2QlwzB3Uz8arX/bxHbG2wU1mqxR\nUb3pL8y+ZBF7Vn7nynK0gx4Cq7mG9nvYhwAzYwV4Mu3Md7HLyaMJrYMgimir\nm36H2oaOc6JFQQxl7Oz/m3nmiwNyIjk3hU4dACR14NHX8KfOShSBX9F90xZ3\nJf+V3MDU3ZoFwsIprTKaQ0UzHIWLE/Q2H44M0GYkH2auRpt8/CXZgiTNVubq\n2m1Srtw+h2p2ONaRn1oSkeKXFSsjsGycm1VF3joFZyC8GulghFnFeKXojwS7\nlGMU/b+09NzuCkVNFnlKyxSCZpFEIMOxmxsWHYmuoXff2rv8FHkw9i4/K8E+\nwuLg\r\n=jHDC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a1c84d4b5.0","@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/typography":"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/floating-label_5.0.0-canary.a1c84d4b5.0_1578420607570_0.12047068078745582","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/floating-label","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"2c0f3411b69fc611681f7ce56b9f0b16467a51dc","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.ec9f16578.0.tgz","fileCount":30,"integrity":"sha512-BR8wbp6gAqSQdycGHrkOqk+q9EiMteWsKSzlevpt7xL30rV1sI2j3fIAHuJUXiiozK+hEjI13ccD2l1sZebhuQ==","signatures":[{"sig":"MEQCIHrcKxv6uF16ZUdV1vzWv3Kc5tcIYPnO4cHm5PB2wPkJAiAejbRrm4ZStX4BbbGRyNbg+qpeE9rUAzeUWL+TmdNZPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN5xCRA9TVsSAnZWagAALG8P/1zlOtJjCM18UJPZ0GEe\nsF+IHXMNashtxlh/Z/UA8J42qlkjxd9L+sKfsRCgoK8hmO4j8FSKyy5V4Fme\n8jPL5+aKPWmSSLDYuw69t+mqCSctnTJDiiYJm9iMWwa9pFuugw4pxUDyrcq5\ndX0/PeiCuIrwumUXe5G3YhUn3WJ8aKJQqCvlmJwXeiEL/8XObgsznMM0FTjL\n5YwtUx3e5OTBxIfNALizFJnE+DfQCxn56zZayqyiJa3XRDakiU6jSyIkcLxs\ndQaSFAtT3atA7/7YqIQj4ihTAQ7e2abz/LrTOmamv970EfrxmJUD5IwpA67w\nhebnMzQMcBVY2NW7mWOxMoiRfcBII5vl3CJeh+eFzK8VG0igHnE9M65VMfK8\n0WL1ZC6vC1cRlQ0NMiFjB7ojLt8NvDRl4lB8fCHsqSsz7Xzi3NsISeSsakOs\n5GGAgpjlnx9DfQGzFY+rju4uPDL0NrbAt0VHBkRaqFwiVNu5Vio49/xBvuRM\nQ9mYHZi9VrTPf7GMDLSfUbuX546Buv41AMwrL/n2qiT15V5ihkgJSggpLFrN\n0Ui+pZ+LpWeCxj99YPyk92+BQ19vlA3hTY6UwHsMimi/bHSjmCWOu4lL/EDN\nOV9jyVaF8cG4eujS77W4y5iwWoyjSewEmQjxA2/hp+S0s27533EBpdXzkImD\ngB3F\r\n=SFJ5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ec9f16578.0","@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/typography":"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/floating-label_5.0.0-canary.ec9f16578.0_1578425969319_0.5150726692148966","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/floating-label","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"39c6fb097ec5c825d9bae2c944156a3ad32e1c1f","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.b602226ce.0.tgz","fileCount":30,"integrity":"sha512-uhkFY3iBH1itzgIUq7DJ/BA1IrxM9huYgHTlnQEa6u55407CpCv9erlnwvJMTWncUNqA5P0ktZ+QU2sWN9jOvA==","signatures":[{"sig":"MEQCIClbT0Jfc5i5z15SR2AG6OLYO9tXdSl3k4m5taQZC9nnAiAbMLNOg4i/ca7vcCnqPQGeh20zZkvtnjXRKWdTni3zLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFObRCRA9TVsSAnZWagAA4wQP/Rv3mWZ6VlUgUKl/sUKG\nGg4EbNwFa1bnOo3fv0CGQW65Vx06cEfwvMIYW4y6Z/achEwnvpkfn2i530rA\nrg9D+JjHT/+3Qy40Q0zIIup70HOIGJMtzSuVfZLbfev7duqNEWMwdIKufHqN\nDKVrbh4WN2gxOJ5OavTEE4GsF6AX1q4KMyRzsC5mfCR46P8VLZIBYSeAiIDf\nqj4aUQXVs2bbfHbAwyvgZFbsyujxDfgkXYfuT3Ekk0OEZTCROtevrEXEoDY2\nXterE3q9J3uORgXAmZB92vR0tx4HnC4u0BKzV+OvYK1C+zZQycWrBbb+KBHi\nhjVuoWySvp+sQ0L2srt6augRoBvdsoGHOAv/iAIGRy0tc4kyMJIvH1liZF5s\n4VuFK6zQnIIThpmVzsbL1kDfTnED1esjVbedXY+lXSOWMq7WHCJl7UC2+gQQ\nUsbOyj8u2rBpSrllEG9iWNcbjL2S6Os74MLKAKru6KHk7gIWpdDwtlBu2T2s\nC0O4/ABd+jiPmjZRmiVfVuR/3VH3YUjTFDWF9Fk5qgu7AfaEnxDTW6mjwt4G\n6Ulg8LC5FU6wbX2aEcBGep3cUttSHuMFNKjY8HyN7zxsJeuCbucClp7CWhAF\nm3dcRZf3umo8okrPZ8H1IurlZo75LyT324xFM57/xquI11kJJgebqotIZlFm\n2jnC\r\n=3A9v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b602226ce.0","@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/typography":"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/floating-label_5.0.0-canary.b602226ce.0_1578428112716_0.333773341654388","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/floating-label","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"7eacc796a345199ce959ddba4c9b46b11d0d6958","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":30,"integrity":"sha512-n1zj1Ca94ALIJgxpqQ/gRxszz+N6pB5Je2WifM9fylCIZT4INFmeQ6NcQyLGP1rWB0lMR/NsiB5/MG6MlSbujg==","signatures":[{"sig":"MEYCIQCcfSVk83BQ9vbpMIclG9WEe+iDnt4Jqe9joQtYwo0esAIhAOjPHQUCJThEqMkphTcYlRWFTaKo9Nvm5Zqi+ALWUm9u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPdkCRA9TVsSAnZWagAAU2kP/3Jqk8CkRW9VJ/9kicnd\nhuI/p2rhj5p9VlJKK8F5Jtb3ADrNiO2cNrulGOsIwbdfLJNKg5P19iVmbCfK\nYJ80eMrxlg9zhFudTaoZa2WMZTf+Bed3Qm/PoFI4CF6/pdGgHqE1DVJL50tc\nwjs81XCiLAldT7yaUfzxJTfBbnH+OHCc6ek/X83NGZ83jS4QyD7SQAqtZ8kx\nVq3Hx56b/+VaxoVQ3O85l/SXjy+MV6J0lMLBf/tKyEOxKcaRR2BKkS+6MMbd\niR63mcZT0FrxNIJOH8o+GPBUJB0cA+BoRpRyRWTmjfdvQwgvCTmUDVXq3qpK\nIBFHpbRhIr1s5eTLC+eL6Nk5ctIEfaeQeiY/+SB+u5C/NgGeE2lVWCGK8Mw1\nLt0es1An41qrhRcxb+yPfnvc3ZWDhC5hMwiYsEPnrTG+QesGst+Os03q8b0P\nHKoKH6x3iPCUaYUlAyRuC4qKCbjTjP346nNNVR5O2mwFT+TkWRbn2M9gLhkY\nYZ/KyYogLWOiLcG2vWeSwoZQOErFabdrhoqL0IT2728f8IViNft8e0WBffDP\na0X06mkNczAM406zkkmQF/aIjvjJRZjslgII1+O9k9DQKyFdqFTyroDkGsF0\nq9ijMlCrIAvq+8rq37zFRMazSMn3CCO62TWoHZ39lbMt2XNoaDJGJb+krCrM\nwVnI\r\n=ZTJU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b2d2dc08c.0","@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/typography":"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/floating-label_5.0.0-canary.b2d2dc08c.0_1578432356175_0.018633541938099407","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/floating-label","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"1cde5819258d1cb3bb6c6c79e5c2790f38ecbefe","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.61f2d7580.0.tgz","fileCount":30,"integrity":"sha512-2h3TtkEgMgHD7G31Suq7hWfpnGNSdJXIifxcXvGkRqg0Y0kC8DS6Z6wJeM0JmkqTwCK3RMOPk/aG6V5qZohG/A==","signatures":[{"sig":"MEUCIDOEV4elY4/pEV7SJwyvy2BLNMPFb6rn9totBvK1mMfBAiEAnE2fwzR2vvGDaupIZV+7N+5GZSMlDqnb7pCmKWFTi5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPqcCRA9TVsSAnZWagAAGd0P/jhDLQdP8SVoWOYMLVbY\nnlHyusuaqW28ndAtndIB1fFyN88HntaBXLBl/pZna9mz14dpc3B0+AZhUwXh\nRkDe0MG6KH0u+a116371ELpYwrU5+1G+b/+2Kiz3uMAs3C3VV771J8N1zIj/\nHuD3D14fy89fJqkDsCQ4fl0Iu+3Fg2+S3FUAyVLx+TLEo/DnzPglbM/WPUdp\nqPNsjht0U1jvdDEKDd3ltDLlVYHNfSFCe4vv4ZdUBJUEnvaHihwEYpEVRlIv\nwpAn08+mbYjDizWo7F1FHGal8N/jdMqEnw8MmzWuw+npyG9W83Z3K6TDy3nS\nSb3n80FopEXtY+JAQ0ckeN4eIFDKdrJCLn6pK2gaLE10T0XK9ZUweqloK0XT\nwMTslPrRVNLnDTxdf1kmEPWzSsNXa89DhQJXHQKmQSMEP/ouI13gFd9bMtr7\n0GSWpNkk9gTlyFk5W9TncXAG9sfBdTwgFAomUOwUz0hbPMSUIeOvJLTPQdho\nABZ49J+wCJs6Hf+K1zzm8GeYPZMhVKq/SpLrmRnTTtS8RtB+2yRIJds2xeK7\nEXNxxnGlNKhY1iZiOmhWq82iA+PeHpbZ/pPclwqbqA/VFBPn7Etmh7e5JG4f\nXYgEr+WhWPITOnuE46lVs2ys9SuEJSd4RCsrTHuRwH4Sv1lYF8UCcQ03TCKj\nMYtH\r\n=3lLB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.61f2d7580.0","@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/typography":"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/floating-label_5.0.0-canary.61f2d7580.0_1578433179882_0.6685733474049627","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/floating-label","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"0ac579afe9edd236d0401402dd1a89afd3bb802a","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.d1be53a2e.0.tgz","fileCount":30,"integrity":"sha512-Lu+2+P4zn9TlAM5ifJ8c1Fe45auEXhAwdqN9JRUQr83Rr2hJgeLkA/viwWkA4WzDFLC0UiVOA9Sq3Ghm/38TCw==","signatures":[{"sig":"MEQCIDkmVkLMKEe5ogqXWi93UA7b39O2OIBlmSGsSRiWCkMQAiAQEwK0F2ZNOabtJAHlGkihqQC2j+DofFQtMArUAAJRiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQNSCRA9TVsSAnZWagAAluAP/jcKX2tyl9BgZq65TASD\nkDg7fpIfuPVLQmcqT9ewtrdnRJs24s8fMZvWhFVh+uyL+pIQiO0wUSK6u6di\nTwxzpPzVsGyjhv6llcUtID3LpFSlbiO6fFQJj2k422kYxxf6oaUrPV8E0MfI\nWrqUhHiZYPYcEkba5CtCSRJVJotV2NKXuqSV4DnokLzviW7kU9yIC9gXEiLh\nPY/mgtP8mw5Dlze/UGDp9ge+AGyBQG4aVY5wbVcvJ+0/awWN4eXrgZb6PRo5\nhgINVp1VXR8GqPTvDjwv0nca2fFJjh2kNU7Dj/BJvVQf556Jb9ysIbDD2Zfd\nsFJlmUgjlOrPwIus3d4hBjJQ4uHDJVVrMbWlRzBHz0ew/LSLM97hnH8DT9oU\nWyJNRIzomRh1c7RHbhudEk10z3DQuzNnDyiGjqIaZAU8RGJheWiZHGF+cG6f\nzTBFESR9gS0PtuqentfN9+Wc+hIKrbTDbv4On1creLwUOTULNilVSEcmHp4U\nQXtlaC5dOWg+4FfXTmnEiVWpAL1MXtARP+AumaVIkIUqTd+E50oZ5RIagfcT\nKeUwGiBoMNIdNPk+Mwu3uEXW7OLKE8//I6sQAWyM/qkrC3D7hJjvfuECPBgU\ntV/+1PF1FowPjWm6lG8/Sw12p82nWyoWc7NIOuvuuDoD0c/TUEz7SC03xhgw\n/uuV\r\n=+fh1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d1be53a2e.0","@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/typography":"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/floating-label_5.0.0-canary.d1be53a2e.0_1578435410017_0.8035381059641313","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/floating-label","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"89d3ce885c1c199c70e27200b3fb10433ee0e568","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.9b0d06e32.0.tgz","fileCount":30,"integrity":"sha512-BQNkD+HuZvYrZPn2zg4Xie1vYNmkz3VyYDSWgh/sOiHilWM2c2rTIJg85Sdqw2CFqCKBIvEIgE+Lh70+jj82yQ==","signatures":[{"sig":"MEYCIQCXBAbTtqpWpggXk4HPD4PAJxiPBwoLfEkUVkf3vl1KIAIhAIz/AVB20QVXd/UwNQ3a7EPFFwOz0q+NDX6d8oUijr9+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQPkCRA9TVsSAnZWagAAOvEP/3Qx7llJD1CJMiwj1oXB\nlpN7HXKdyzoy8YTcDfY9mUgXPCd51dlz33kmSrTAcWhAVy0rBnpEGlvOLupO\nSdGSLFpjODhzli4yXCGEbOe5r7R7wFPVGXWgYRKYYQZM1fJtorcRlf+qi7b1\nY5o8m68Q62Us5q08ugLRE0knM3+QJXUQc6a+ZeFfACUuRVj11o869zu/RWnw\nrLnDxdOAt0VtL12kKZffTEBbA72zdox9i/yCcbQtfX4B9bpdKx08rqKxPRdO\nBX/fO6JMLa4rm4bRdWqqaSFCvudVx7Gn0+4Zx0Dfk8KmOsDy9cRBFt56Srrz\nPCW4HNFQaMl9ob0uQKTHKZIMxyi4AsHH6JcCRpmd7l2ehAsR4ddu7mtKik1a\nGuMVmTiVsYZsSH0aQMGk9VcjxFleLA0l74/fmr2P77bpouCovftDEAjGntw9\n2HsZ9Ng4+thDDZkc978LB4r/wpW+r7Np/VPAGcTcSwIBi7FR8pdJqV0XtedD\nlaw+sD8VwkzOrLC++rbBTaWIx5Kvd3F83VsqIV4FfEdYZXKNQSbJrOMqLfgw\n5K2Vg7eXyTCMjzzg0WFZ2DJtAHZEv7AhHF/zgyrB3V7kywiVMTZ7uxg2O4Xg\nbxzyobHUhro5jV1LbT+qDjzGolDWIOWFsI7ub9d/vajXsCsF/MVyCfVJ5wfT\nxEtg\r\n=mVgR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.9b0d06e32.0","@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/typography":"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/floating-label_5.0.0-canary.9b0d06e32.0_1578435555922_0.055735618097946915","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/floating-label","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"dfbcc868c56fb868a2e86da29ac4a888d0517afd","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.730c807a0.0.tgz","fileCount":30,"integrity":"sha512-4Y3nfSsABK/d390okGfOFWfjpP+wIEU+GkS6ugmzCGXyAVn1PtzUt5fEqaSuC5H687awSuQUbXc81wE9ilUXOQ==","signatures":[{"sig":"MEUCIFowVJEMQcgbiOwVUahzap74AE+6znxmsUwlvHRRKQMVAiEAxrELYbABUfn09eqMPeosWSSu2NCVaFAMqW48nypVy/I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQRECRA9TVsSAnZWagAAaQYP/j3zkIn+hlrKpBuuA/IL\nNGYRFlvIHHMOhWXEKoqj6usQ/K5+flyecOvvuVgwobp9BvsGh4Q7Q6Rc1YMh\n5u1O5JpRXuUbKjOuZquLStf3k2gjrKgn1p32A0uCFXoUIZK9UeNiBky6+Fu/\n5UPYKiYQ700wp6Rp3ry58QjmYCxiT8QTA+eVEE9MDI6NkE53PGq4Pv6ZO/eR\nMyuiww1XxusrrLlXGqQdD7nBBrIUyBUROTWx1QKGwL3hQUFRIDOQrgWSF1ga\ng41E8lO47vMj+jpBBJeZK0cW/3xEUdTPyp2pkMtf01ihaSOLvS0wG9TtMrcP\nHks2rWH7ix0p0MBt95IN7AlfmQCmDo5u52E6yUs+PS8Hjrl+W5RROLu8+NX6\nkG8mUg0rHb/roF92jqCZREbDA8JbwylU4FakOa71lvtvI7nKJx0KIPQT8LjZ\nA2kf6UDM7Px6TQr6NrZRz5iZ6Joj5jGgpvB4qubPhF4PSQkQqaV4DpNQGTv6\n7nnAjJUX4UBAs0Fq/P1SAYEdVJr+ukOe6CQpycI363k6QCfCLA7Aq6ZZ8JGN\nlsp1Uw1BMUFB/0z9Cws33k5hEFvP5KKfk5eEYn1Ax47KSdfixIBFxpv+3sio\n4qzN334oefLULkBsIbhrSdQ4Rx2kSU6vM507mzL4V4q0Be6RdeweoDtFakOV\noj25\r\n=XOOU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.730c807a0.0","@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/typography":"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/floating-label_5.0.0-canary.730c807a0.0_1578435652104_0.4342663036240666","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/floating-label","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"08daceba7f1d3155a4c3240b01f9b70836597919","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.2213152cd.0.tgz","fileCount":30,"integrity":"sha512-PYA8CezN26OXmIvTsU8gbsoo5DGq94ipOOJStfBNwK4/34+pAGMCAaZexEVHtEKpM807s2nRRigO6kB7S1wABQ==","signatures":[{"sig":"MEUCIDi2prQWcfiCc/Xg1LuwVuJsW/sdRDntz2pqSdF6brnuAiEAgduYjgTEM66nE9I02bBbqwUaeWPB6Ot/Bsz+3EKauxM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg/DCRA9TVsSAnZWagAApYIP/3ptWPc1C1LnUqSDNeo7\nmNFCG1Hp82W2Sg3f5fKNh9nbjDf313XujRjgWaXIvNbx/+nI5owo4gMtlpVK\nWLx6gHZHJhuK1Zic0CLub5sGdweWDbpQ/lqaXGkzJJ72+71ul8vNWrY7eIl5\nbjQj/CgguwwMwVsXmlNyLSdhy6FZMxGb5Jp35BdwsMEo4Q0SX2ZOEZqQ211x\neEMxIYYcUOHcS7j4JEqq/0fM8EL+f2OdLxq4Mg6QwkeELK9OxgwwEtCwjYKg\n3ZRcmt8kUy0E8DTvLVgb4ZedAGNLYQEOxQKqxq6OuK2apJkalJxVSnzbcv3a\nv93oRZCeScxmP6HcZI7gT2dSiLHPBMvN7V8PIXQrp/UXCofsXzuhK4DsBCHz\nNqy4A46j5wI9mJ/apQZih68OG6BYnApJq3+595VnwZ6gzluOhVbkq0mZBXNZ\nA6Vjz4/0xU9a5KS1Iliw15FgVya3pceOkA5R2QQqam8Nc+ppJFo1yu/kxPDT\ne4VCMnx87PX7K7zpLCvbPZy4e7iq9ZVTjStDcU92UWnG5/ssJjEHT9lhzNqq\nXLTF9wVPpgMtxkGFzRfrfFU+uuFWw4Gyb8RRlzNbD8UlXaQmvCsRnDsDiG5R\nM3+xix+17ut3vtctTDUOKsvyL8EZowXtOSrI611yW1pf00Tp+TqncK4OrC4J\nA57Q\r\n=Ue+4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.2213152cd.0","@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/typography":"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/floating-label_5.0.0-canary.2213152cd.0_1578504131271_0.8289192948204753","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/floating-label","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"90f076bec7178006def48b59c0aa691efaed5721","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.5750f7169.0.tgz","fileCount":30,"integrity":"sha512-oEVD4L7Zv3g0TMpUggGDlEu8KBsjMYPzbKHyJa+SLL1i+jyJdB57dbbmkWQ2CVekErP2YsrP3ccHROH5e3NVFQ==","signatures":[{"sig":"MEQCIAn7v/zBNG05uWbPHL7+vTbkGgRbXhUPK5MmQ/Bp1rsRAiAsXj0wVWAg/2qQpxplV4o3RZz5xq0BaQ63ZtHbrvyalA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhfhCRA9TVsSAnZWagAAANkP/1NgHYNMu7EYoDiAB9q0\nN7GhberOu6/DtRSWApARlkWqcE3mfEohVkfV9acuOLZ/Kq/sjLbGK2oj6FCl\neJaqcgx6iUHOM9octz/x5zuwwELfBfpyr9WeLzvTCEsB9dU5u+gusF1t4n6n\nyhhVmp/hb/YI7winz05EesAx0wBTG1jFwqR6Dvvl1DOfzI0STS+lGNj5Ja34\nDRal/nKaBYZ0hcePUUUlh2njVPs9XwWgJeiqxm+QvEn9pPoZShAr1is5ranj\nRshH0ouYLxgGqg5xXbFLqcB5ehDdWdrtFghxABUZ2ohbg85sNPCO1gngaRMK\nm3ogr147XC//Fk8FqN4NwWqEJCJKWZlabbJ7xTEPkN0aINMX44sPT1hPiYYI\n7wEk9pHDAyNZ/Tk0+JyFvkLtULH9Grwdt8dP+2sIJyJyjiKCseUAQ0VAQfE/\nlixsnlYTE+ooRKpcZYCtRluoGulJQI7LiwWkD/Fyz/Rip/NYebgsF91BA84c\n/qGfcCwUGDjeadxvnlczUkJDcBOEF1+VhZW50E7YvcqLnCwPVDdVhHUO0+pq\nUQ7NAVafhIvNDsxtHFOXzHl8p4Rigr1XOcqk20fo9aMZPHHy6t0c1NXvjufT\nNkK21a0tDo8lMyjkPOvyzgIOp4kYic8Iy3thu9CEyzonC88jbU/lUzz/qVcy\ntkSC\r\n=iwC4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5750f7169.0","@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/typography":"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/floating-label_5.0.0-canary.5750f7169.0_1578506208802_0.9097500293012992","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/floating-label","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"b40c58261ffe18dd20ee0e6d997bbabca75ec9b3","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.f7abc7a43.0.tgz","fileCount":30,"integrity":"sha512-1nAshu6n3Rq9FlfPNIzRuE9PgfCexmZdvE980z75R7ls1nbR8Gs3hW07Ypi+z61ujupy7EnIR3b5ZTXNPP5Epw==","signatures":[{"sig":"MEUCIDuHc4/8IClifb7S4AOQ5I0VY0xFrII6Hl9jNkjQoGK0AiEAx5/hiVVo/QNzXcIuBw37zvQ7pphZeaQTjqc+v5IiKOU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh8eCRA9TVsSAnZWagAA450P/i2TIjvzGbDp5x6vsbDd\nQVS+wEzLnGQKHodKeGegaaJ0XwsouJYVOWhKlOIPwhWpspkof1fBwA1zthtx\nPsCNG3xuUdKdo6azwhcF6AHgeje7p3Xq2rcSlJ8yuGUAlugSiay61VSehfol\nmZz0fqjCmOERza3tzLQcrixcru7nzGkoLEvE1hzlSIEeM2VajXZNusBEaiLv\nze8OxSCdRs1M2aId0fFGcdXI/rquTb5+0Zg04CwM7m2aYQ4Isv9hf+vYIRCv\nL9C48LINbXTkV5vJgnMbRRPPefuTWqQCL8sc3v8rc1i9O6ncYFlHhLvDgNyc\nHIbNLVtsoSh33u4GonRMMQDhX/2zEmdO8sII3IJ/Bip8PEsxnmvvS+A1z8eB\naiwGhhl0+c3Ch+AziZ46yJgFH8BlSC9X7ZBsMOGVivJHQ5qXWuHiimRpJpfG\n4f/KAnFKJ79v/hu5gR0gn0IbUUtP/O+FypmwyZClY8J/Q5O96oJcI/QY8aZ7\nM8/IzMQDLlzV3qZva68igdPEUtJKZGTDe7h0xwSFqw2O9jxBYnx+EZipOflO\nGkVa+XqxBjxtQeozEsJg2J/CUBGE/p73tt7V8puPa2Xt1mLilsk61rUj5Uph\nfNAy/m8U/yg9UueSslgxW7/LqukYdNBJ4Oa0uyXNwuCENVA3nGgxvDwQprPa\nEjoq\r\n=H2m1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f7abc7a43.0","@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/typography":"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/floating-label_5.0.0-canary.f7abc7a43.0_1578508061876_0.23473587872323165","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/floating-label","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"c231bd3db20b1e0434b958aebed3b80811fd0233","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.bf7b4a061.0.tgz","fileCount":30,"integrity":"sha512-tDRI1RKPOCX+O6AVsgPvxcrgFkq3oz6t5b4S6ps9+TRFzJrNjnoKAaBsnleC8ISAYa6O57xXByUUNCHmaOhl/g==","signatures":[{"sig":"MEUCICK7XtZcVXD0vSDI+WxGCAZZ55DxONtIATJ0xhQ0k8ycAiEAkwCUxzVOHDBgwVskQ2kQg48Yub2Ri5yOZZVxNP23DJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiJaCRA9TVsSAnZWagAAp/MQAJagWvvVrnUIEJZtNtrw\nLFZeHbCTHP9PoXPZXtnQ/vBwyHRZXhqtPBmqoBhgSW8dj8HNGe6rqTFVYWl4\n8YrnTRbXNFm8ggNv98bYk5Vp26tM/QuyZY2wFjFqbcQ1zypl6+c24cArfKGt\njEP7xRwP+25VBCWPX5BJkuWSuH0ZXLmbdmzxrSc3/wu7wHM7ZeK40FoG/Ovw\n6QV6nqIGlh7KAuZH2CNBMua2y/O1nzegBeCfGd1KwLDUL6a05pvo9heG5i/y\n7AUcFS9rUhtF3Z5U2sEcWhHT3g640sSqdp5aMDI9dU2bR7XUv1R1eQ2JU0Su\nnwA82D80E/XIW5VNKK/NMnoOokz2fFIZh6xit3yRsg8kk+RqK5STk9TEE0wV\nb7INkyOqkDJdIFU3RqFzG6GhNW6d//I0AytR6KOcoL7UhFTQ44ponCUs8ELr\n3PYIWti4vp3KEd+trN2a4/0nYPDjM7KsmBU84JLDy11X2C8Zh6wm0xmL5Yau\n/zrvWsIS2ja+aGxjUz+UN8gpUP1m1l/AWvso/4viT+GNSjnHpxZ9ZjP+4071\nIxuqV6zqraMic1Pdk+paGHL4d+JtN7wU/+l7IqkvVLrDdjCmx+wJJrivGe9L\nZoS0dVLyszXPWkuqW3bky63QqE/dMQDKBYjGRguDuccEAYhR3iLZGQ6v/aJf\nYvM+\r\n=k8n9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.bf7b4a061.0","@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/typography":"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/floating-label_5.0.0-canary.bf7b4a061.0_1578508890250_0.4060775394866287","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/floating-label","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"d96dbb2fa2378fd7cff0a0ac271e6913c191eaf8","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.784fa7903.0.tgz","fileCount":30,"integrity":"sha512-DBHJZaRAdqDn8gbUZIMgs1n3k7tbZuNxJNNRwv41NarOFn5C+HVaiPItW2HbaD7GHrF9o3OIGF6husEdmMHZ6Q==","signatures":[{"sig":"MEQCIGB3ReRKjHE2eWvF7kG28+UYiXPiA42szM2zxNayDQFLAiBrjtRP96NAP32pMxq7qzqPsMypWGrZ/q+r6efB8ZzpBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFikZCRA9TVsSAnZWagAARGoQAII5MW+RMIzG2da7puDV\nbQv3jH7dvkinvTp+bK0Pl1gbUs8IV5IEp5uzVcXZUGYBW3OKC3zoxcyt7i4m\nyOqzP+08o2d8ms6R+HgU96/Oavo0ZLnjbNFfMtNiPhAI1QxOqoih4bXjXAv2\nuA6e4zF86f3ORdbTA2WYIHipbh1qFVlveaP07K9bd2hznnHera9QcH2IXyos\nlYZxIHu0/ZIxGyBJnxTibrRDDznj8IqnWg+jNWRDIlgmf9UlXTwy3qaoJMXH\nQA6nKVOH6gUXt0a7KIvQFqsn6M550K2tOw3jpgCQkLO4S1DTnnlRefSdRPXb\n86pmhbLtxoYTGi2UNHWLkc7vyXYvj6bBAWEETz5YGwfQAqENgurgysRm6U68\n50A5sH+ghKH1k992HrKDcLEBnKA/5mzkrERpYv3RU6Lf9UKC6TQ6x5TazrG/\nUZKn2mEtg6h3tJY2u13Hc5MGu3ibcYMQa7NJffWFgevoeakTFi6R73grJia1\nxF+CQ1Ivsb2XeSPUY18zjDieBg/rc4YqtEAxq9sIWCT85ADTPWvwUlPwVe2t\nNe1x7HQT/bLbQt7Gpo6xxbSE5s41WLdb0/lB+8zpv5neAmiHlkOzujyH3T/8\nTAsQFjskZs1Thyv/24DUxnRQUv2Z+xdG5j8l+nn/p7yFW7EqiAFE8mxSIfp7\nBTN6\r\n=k1kN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.784fa7903.0","@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/typography":"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/floating-label_5.0.0-canary.784fa7903.0_1578510616589_0.6279209272097916","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/floating-label","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"6f65ee701200bdcba4d8052d9a94beccd721c89c","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.823c050ba.0.tgz","fileCount":30,"integrity":"sha512-aqJ35cWZu3RqDRFo4oCR4wMJuHvuTEgZqpLh2js3f+GZqDz1Zg/aInpDsiLlVbZPDsnmDA+Uhc6+Nz0MxvRr7Q==","signatures":[{"sig":"MEUCIQDhuylXB/1WNyf7VMeeSVym8HZJQK04+FEXtSXn+ZkDcgIgHDG+Hwy14cu6Pz39rJdNgvq8/twc1v7nr1wv30/7o0M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjdBCRA9TVsSAnZWagAA0rcQAIQ+iKSFcwTVumrCm+vm\nNiw5G7kXvpxpSbT28WSd90fIts2f5UlVtr6kWuQvWE8sBPBshQs3uv8jLecF\nZH8piTZT9BVtQHX97s8pqdQss6MENOubmK2FGl72oOcfPH6/DL6/NnoJd1xz\nJG9lXhZC1dtxEg+UXpTeaDqLzDJ9zjYqGvSKZXnTlYKMxU7mxvJNGeHGfpIQ\nxsVXy7bpvGxYhuWrrmxs7sGu6tgI78f3KKc3ZvNokHxT+LFg5xJXrKsR6J5Y\n2pcwu5W3i2NhfGcINqI5pksAa03vvTO/qivmBe+/YRM8zfUtyQxLJMA6zHSK\ns3NBihN7okaO8MRJ0asc29pziS7rsxSWPljQ709JkKitnwm9eRJXd0Cbhjzz\nDiAbgyR2/atNeR8AXr0Vc22GJYdfVu3/t67lwAc2sG7zZ3+B5ZICZv5FoZ45\n0geJjEzgf+kWrbopzO6IXaGEvLOf7Jvp0k6JH1+BGr91ZKzLmykONUmmtUbo\noUtgIuIM/bkn2k7J+ghRChpJw8mHzjdqby9G5mjtNlkmhdy/kFNpBCZ4JuYu\nOty0i6yT9HxfWV3yJjErRtRP60XgsHiIMlT2UBtRhzLsnZxB6w2Su4/PEp6I\nvHttnS0IGPPyUfJSLd/hh301Q/mgV7OmKjtZC9IyXiYTCBXCx/nw9zu2Q+Kw\nm2dM\r\n=Zcnd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.823c050ba.0","@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/typography":"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/floating-label_5.0.0-canary.823c050ba.0_1578514241575_0.026606673546074155","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/floating-label","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"266f036e2712d45d24f453fc3752d8d8175d73f8","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.70c708dee.0.tgz","fileCount":30,"integrity":"sha512-FnyNefKN4FL2RVUoiDYhqEX4XH8/4vK7FvLdJ+naw9x3EciBE5+nKvfK3nRRApRqkcdM5TyaW6QTeCx41wh3sA==","signatures":[{"sig":"MEUCIEQuo04Yto4ZooZGlkFrwV6nAielx8r/7Hms356CjVZdAiEA0uo9IGxE56maQw2MOZphYpr+OwLukYmPUWQ/U1MzG8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjnnCRA9TVsSAnZWagAAyGcP/2uGXMkqrBe9/58zuW/3\n1o8peBTJzhTuUTQtkiR01CCJh29PjE+IGsV3PTB4hN6rUO/LvR9nPiJpcF57\nsbYao7yG0Cr3eYmAVXlf3eLGallDgmqdVhVFtgxqXBIbGLazzhx8npssBZLi\ni5u/2zjZauS6j9sVe2Vg6nmfr3ZVVTxDYnU3EjIExq8pu82iTKqSiWuLpROD\niFPBowJahPatvHpl80fvNNQrU8O4TWUACio4uw/PkUyfWWBkFRP+BbgwfJIN\nSz6DTQoiv6x0hbH96GKWCzU05UywDsjYpfu9l7iDfrARCTzo/JsWtKICIsnq\n99BpY+bfrZiCJvfyRIf3bU5yLGnVHzYcJng2iPAgHfV1fjtFDam4xWrfnqS9\nFA6b/ZJ3oJAAPIeIy+xyGvNdemVMvI2pifowhHJrRGO9Brdf9SqDgIm/eFbd\nwTjKupTDjUptjfRerYCL110TxOYVqFb4ehKTe03WPZbBRHMbmNUAgpuwuaYZ\nJN1I7zpuT9TQczoOSW20rfH1Z8Kwt6f18uCAY5bfpVnu/+tGRwhnuXFFvuzr\nPA9UoV1kKH2wJW2VQ7OYoNo6JKZtYKk1PmYMS122jBF3KtSvtLySZhK1NEtx\nFvEYtFGd7w4TeEYvwsdOgFgUxh0wp5dq+XRlPT+WmyDaLzsIb+OHV70rIU9d\nkdqd\r\n=1a78\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.70c708dee.0","@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/typography":"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/floating-label_5.0.0-canary.70c708dee.0_1578514918725_0.6513558814622951","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/floating-label","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"0cac4dc4f728f0efd1179143f6e5a834b050c5b6","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":30,"integrity":"sha512-vXWvv2JPguJNFmSfhRoJha20t2DrgdJgl2EXmgRuG6HgkCIU0TZ7rLlNbHTyGFqIRlV1iYytuHzpeCytfwhrSw==","signatures":[{"sig":"MEYCIQCmh4HsDYHeJiYklpMgfz0MwLNCt6HReUvYBWo6BhDvmAIhALsVafVY1DDqmva6myEgRYYYJ84gpTIUgkcf0RaoTCbF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFkzMCRA9TVsSAnZWagAAIJQQAIEztFIAcbLNmu/iPQNl\nREMW8YAf1qPogKxLS3Lgn0UbuoEEP+jInuGdfo8WSZ2w7/t5kFNSdP3SJHP7\nqEEJuYvEn3CZTxPSMf3YULh7scSK6bMxdcgaDKq0YB2sAyP6RZD+2hot6//G\nlym9m8aUZc7rXvtUIkzTyfBgPpE32hk572JPezIQvDUGSPGRt4bgTYe57n3Z\ntF+VcCaPvp78AFNgGopn8i1JKKtOvnpER3MJBlW0t7WViEVXobug/WweG46E\n6T/3P+v9RpeNN6VsCI1jZfrvYlNp9pOvj4Iz0q1oVDcB6FnRM8FPFoAoJyVj\n8lB5vVrWGNFCeUNiaD2sQjE5SLDIeW3UiCdzMwxSK2QPG1wMWHz4rgvoys4g\n45268vJbCV6JyzcK7mJkcGi4yLZIeSluy6GXsbVU46bFzBZsTnYUTNy/pPa1\nPA1pbcSc2nEpdthCDYs+MTNeFYwO9VU4Oxwh8i8RmjLC87+tA/+1OGQGVsy1\n5UIETFfMeqWHD5wJebNm6/biUgfEQCt53e192LG0i9kccfcGueREKFon2Nsz\nmNrEU5IeSsCzQlsceJlZ6v/KXnNzZm3vvsS5Hm69PaGWHuwS67jpT9BC0sOV\nz1DySqS7ONKq1bd65V4eTh4DdWGFmomoArCZ72yw/9ep9C6GJGY4GZennGWz\n0LCY\r\n=rEsc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5ed9d13d0.0","@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/typography":"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/floating-label_5.0.0-canary.5ed9d13d0.0_1578519755826_0.3686154771230141","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/floating-label","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"4851d4da04d1812065f26514e963726d2aa22b60","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.4819cc7e5.0.tgz","fileCount":30,"integrity":"sha512-3+bOz7ZgLWXhrNK/9O1JXozBvZLPVGPg44mO+CrxeDYxYL6Jnffl/NP56Q8butdFwp4kQ/LdC2fffyQ3qXp0nw==","signatures":[{"sig":"MEQCIFf6gPWBQXe6pc/dX097iuHLEfaD9q3GK4iWlSK0iOamAiBDBeOH2B0giOwTDIymw1fr3SYCANHGm/xQ3RokU84YsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlBqCRA9TVsSAnZWagAA7ncP/Aq9Kr+yS4lBW5u3s6VW\nM2QYDPpMiXnKGcCucn9QBEjbAIQBymslJmx8W763nv1xmWbPMNHcYMLn8JJI\nthvLUqY0cO6vwQSu6c4bmp3I3bQrJp4qYwuUJfB5brHJPN7TyrqHx8ydent/\naAKeZ189mIjixslgS/p/CH16Ub7HstxOCkBPBxBs1/N7Az5kCa1aMyxsa/Px\nQF3zL1sLIEJxwIBbj31zA7y8pJXie0Tevr7ts4Pvqh8XVk1YFlmjy75MWtab\n9IKXQguiJbGjfbbtmZ9ZGO2w8PJhfn/apTkPWlTAew5VMrNijLr8PIRNLECJ\nDmO6PSqMmEwBwOr3/S2/0ARgc9RU/X0jSucy17frRxH66mXjw1zN/qHCoXyu\nepx7klWDMOcIoKINNguiMVmzQ/HShMV333jpkS9HDTy6Y78q2Otlqt4SdyQj\nBWfYrKizUuN2icC9baRTSTVP0iUYIguv+SOtREhYQp/v2D+P3UaZUhO1958f\n1YHI0UpSd/LGwNvmefUWq8nCKJDhOMe7yQYgbWPB6iMcCtuUEys9Ub5Mz2uo\n7MmME9gtq9rHVpYku9XUrNmUspFGcYrJ2KL/JyteNRE395IyqHkRlYAjICYP\nvLD/eZgkH7Y4SWcgFbyLaaQIh9/jKZKK5a/J2uVBZ9DE9PDxR6Uv6I0GlHt2\n9HXx\r\n=MUGK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.4819cc7e5.0","@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/typography":"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/floating-label_5.0.0-canary.4819cc7e5.0_1578520682094_0.24027334844312564","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/floating-label","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"cddbd137197c6894950d48955fcc484e1b65ba80","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":30,"integrity":"sha512-3kdIfR5nhlU0zwAp+iNc7gkbE7jM5SE15P+5Twzf/n/xpW3LlLNcXNiiCRvNYarIVBVTuxqDy8RGRkHiaxiKRQ==","signatures":[{"sig":"MEUCIGFKLnYoCZ72vhQOvPxh6mWzd+kMuNt3neYcG6A5CZqPAiEAjKOVaDuyV0v6yZeD1NlYc3iu1QuQ1nIsJd0cUjPRylw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlSsCRA9TVsSAnZWagAAsLwP/jNBky/Kk0h4LDBtgUaf\nmZQMPopQcS6eZQ89vrucJPuIBRGWhpkwO109LQL18SSpzjg8i0iHbIIBJY0I\n01XOAtK9JkuDG9V2EhPSRn7uDnYkk7+5mKaaLSu2RiPPFwLM3rx4Qt/Axnyt\njuOQUBW8noSRht4LJIEXl+7KCLu/df+Axiuh9awqbDrzZfXSzEzTlsuEGNOm\nLARCtxgYYWcCPifyYUbxyqHv1ovjpza3o+t2Fg6ksK9kJj4ZfesOkV8YsBTv\nVVzTFteIML2T+aKMlLF1p9/jNyqb06ovCW5ARbO/xLR9X7uKs5ls7cGMPB07\nyj5jUpji5d5gNWEAUOumrh69BIwp/DDy/x8BJVDQ+n0FUizSnqXpFci1YIrZ\n3pxsy+MwkWmfRuVgxy6B9/IyGZ3OFlsC6fG5sNqJsbCt6e5xPjKdtbR4od7l\nfbZudI7MroAhfEV4mhBITS/zyz3MADUuPH6ghWxyz1IcLYcqgYUE0eQWARqT\n++svYsvrMt+wQA0ipm/sAMesajskq5NfkEsIoqSBVvl6sVkmkvSD4+pMExIy\ns/IRuUzvuBsDLrTWEOOLDMVps8Sl/vZh9xI98ldvlyaEUSl8cPh+6qGGBo2+\noLqXvTaeYCupwo53MZqxHstnMSHY59t76r+pbqbFkyzWNLu9Fp/yHra/zWfg\nS2ue\r\n=4bIM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.fe3ffd2c3.0","@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/typography":"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/floating-label_5.0.0-canary.fe3ffd2c3.0_1578521771717_0.7747160968848426","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/floating-label","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"a84effb93de2215c155797ccbc218263a8881279","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.c0e850090.0.tgz","fileCount":30,"integrity":"sha512-ja3B6QbgWK369W+JlRtv+/BkiE/0FFUC3KLaru88h5CHE57OslkntXOGD2HiczWpdRcWWyjWhIfgr66WwaeO6Q==","signatures":[{"sig":"MEYCIQCz0xkndZL2prJjj3+DeA78e8Pzz8l/yq+xrQQz1tj/RgIhAMfNhRMbo+w1/WUPbiEkejmCNXCxcYerm8wPXuRgnbqv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlZOCRA9TVsSAnZWagAAt5gQAIyxLKiBuVBJ3FPCFjo8\nTqprtnyhAtbC3qK8pZdaj3d/eZnljShIvek1j94WvCDKKGF6D9swsQ0MO9Ew\nQgrAr4dpWRw3N9ahyGD+1KJX1syTqAKPFRmX5gb+fdAkNYyNPkQGe3+tJb4R\n7+XjyTYNzZny4hTyThJpuIV0XY9LE36ELLOB8B5Isqvg1MqUe3CBztkx5ESB\nJuBC14N0F82fLoIscTzi9YayeXr2K2Dxc2X36dWamX8QZb+4JYXM5E+mb3cW\nvqo7C4CPn899ym7lpeV9rP6IVmjrJ48Sq4q2P/jLukCkaTtn/B+1ykYfbWar\nXH7fhXta+KnPKdgjgILv82VNoBXls8LcSyvMrp4xb9JSoE7isj68+hkkIZ7i\nlhDEz7vd5dLEG+V2VrwsaaVykAkFUW8S6yhvoUmVefuk5jl/7Or2R6q/l/AK\nGY5ujbS6UwsxwSVJmG/KKZVcL2Loo8QXutybhi3sT5GXvvn4bJ7aSCBv171A\nniZv7VnyexlYrRBntzgszd7/riFG9A5hADHyZTvycy5DrQaGnFohjswQFqKz\nUKVcJ7lZH2ht2JfsUUQMZpGCdoDGi6B3Y9YNyP2ImhsF1yjZXwfWGMWu5YBn\ngcQtpmCiVyIR5/XTjZ1Xez5w29Qs8Cb7Ywt0/6D+YB5GZmer62yMKpntl3Lx\nUufs\r\n=4367\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c0e850090.0","@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/typography":"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/floating-label_5.0.0-canary.c0e850090.0_1578522189781_0.7591437823417537","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/floating-label","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"0eee52efbddf2ceb7ba3fb2e7cbf00e52ee89358","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.615f86f38.0.tgz","fileCount":30,"integrity":"sha512-/aZyG17gisDEY4tPU2SnVUTksWqPMYs5J/uJAmJXM9Lp2pq/UFGJ+IfYTpyjVcs8T31O2PYMjZUTN7eAr9PS4w==","signatures":[{"sig":"MEUCIENuxq76ooYfRZUPwaBE15OUmPlqR4coaeEUNNGrTi12AiEAkV8dzli9HvV5Payi/wrEj4mDTf8zfrBIDya9XlLsYmo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlo8CRA9TVsSAnZWagAA4GEP/A4GdLveOEMcqaP9CxBh\nKSPcHSlzFdU6LzBl5+oWucVica/kwJV7jYGwyvdXBIkG6HbzmTSbc08sucVI\nkAH3em6qfNI1mfdWqZlqKBN6HJYBX+QWEyLMOT01nR7qj9foi+N98IqHyGXL\nWkhhwTD/n+p6Ok1trMONuCWzYWSl7pf5toADa9rhh24AAkYNRcy1vfTH5cQi\nE6xfDbO4dbXCoQIyHhwkPJDsn82DRiVsF8A7C+Mf2kETasB1a6n0PGd054ri\ntd2iZvYt4LTDfY4ip2ESM1WRWutDvcuTVbuDj7xAQo3EWx1UZGcnAFJtHsWG\nV0WrrSv1V1HTtlucNUEJ/O+bMTb7iBvdmqjegTjI/k94uLZI71c9hAyKrZRV\nCwQmmxoSQR4nJZVYGWNldBiy3wXWZP7x+Rfh84zb/2X4bKDALKGQ4Z0VbzTM\ndYbCtFBZ/O6qo1pVT9vG7Qcs6B2UpYEyCtFXNpD+bpl0Ti7yBj7T0QSOp3Ak\nFIfmlNI0A88sK3Rf7B8/DA8jlpPLghxFRTxsI0FZa2TozeT78wEkRDvMeaHz\nZbuQ7mBHAgXxm6D5I0b6NPZNw2BVnoWaoudqaNBZGbgfIGxOlbvGx/vFCnCu\nCA4KBNzvlZdaUOgo957eLylXsRaV2QtrTCPjsLRRhtCrq5cGn8Xesv8JTkk0\n58cY\r\n=Juv/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.615f86f38.0","@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/typography":"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/floating-label_5.0.0-canary.615f86f38.0_1578523196316_0.13220382665924846","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/floating-label","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"8f6a84727c3ca7f992d23532089797d51636a44a","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.1eb032637.0.tgz","fileCount":30,"integrity":"sha512-5anxWzIpJNGYcV9qkJQxxWNQ/PCtfNOVdcHwfqUs7B2Ep2oreNei/LDnDcH81+aqcq5WCBOIgi0KsWJ8zEWLfw==","signatures":[{"sig":"MEYCIQDIjz0m3wtTWQypZoq6qS3fNWs5IlWgPmxBUx/Jh9d3WQIhALS6D8X1DUsYsHSrSYs7OeTp2x2l2uTOLjJaGygcyJbO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl7tCRA9TVsSAnZWagAAslIP/jy0pm3C9a5DQHmg6LOI\nI34zXeoIn7mq/+NKmnzJxzXfccOjNaGSPmVP2kdMrSY9pbdcbXwoI98Lb4Ny\n5YlxKxxu0Zaqv9nDdpGH61O5pnLEI6I+2Ro2whefRlRoXiiKrbuwXBivrI3w\n2D4vMq2gdvYmGMOglEpjfaK/jXq0QbqnDjGwRetI965/CT81LTNpQrWJF/w+\nntaYvZNwV7ik2dR9s//495A9atwyqMaE7jPhLsWKb92dmVWjSOsNei4HN7Qz\nL1ZnbRc8mTY5COejXrGjTKmYkj0+wxQ/pZLiy88sLvw8W2EYVokYrWUgO2B+\n39WOuwgojGXuD+L+OLo1LOIIgubvCX62+pnzjZi+mzXjxT/VL2sBEg14ELLz\nLiDqiDwjqTqkjtiaGfUrMw6uEbrDNRQ3UFjzqMy030JpcsbD92A0yw2+2Mro\nICqrbcbVrxfptfIEZct2w3SqvT7aCr5O9x0q7Vj3Vco5+J1ZDRSJQYPzYuXz\nLnSYFHVHJGVLX7b8l7CSptkilZ6zfdEe4FmoTXkte1SghLU1rmtojkeLsqaX\nyskT/xHw5FuEYZdtxtFfThM9suhlFk/tlaSU8kf1qidH+wDxJNPwL2mLZuk4\nJmS2T+AqIqhuCepA+sDlZ6s5eytLn2HJOQnBb+ef81iEvCCh1wVlVSqxBPZY\n+UhP\r\n=A9Dt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1eb032637.0","@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/typography":"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/floating-label_5.0.0-canary.1eb032637.0_1578524397507_0.03764482207064779","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/floating-label","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"f4e70bcd5e2fdc2b95dc02e4b6c60f8d6657b51c","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":30,"integrity":"sha512-TapjU76P+JbqakeO+pzltG/Vnl5WAGvzlHSueUnKytvy1Wi9V6CPutSUVC3NNPYSKJjq1vkgGKVJEzXw1R49zg==","signatures":[{"sig":"MEQCIAE6UYGlLZWulBLXY30gTomx4hB8r33/fTeAsAR/EgZtAiA4q77DhL7Ao5rt1RUmL2I2d0k/PZAz0rSR9fQAwNqpjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8gCRA9TVsSAnZWagAAkfQQAInReGDIY8LEgbZuXx2Q\noREzXPiWmw0afIDozaijf4Tprpk8pOEDIjeFNPtybRq2m2Lk92L3uEVA3fyk\nMSzWc2zv9hCcSx7cwUi5KGmqSnjY4sZzrF5jKxPEcoi5KsIkf6Vc6ntcx3Cp\n/GfnJjHOEx4zcsFQeHqwP4cZeTyUK82iZZ5J2iJK3hNT3Fdm94F8tXRzKfEp\nydfDGwGUX33oAMZ22WzPFhcg8EVjopKeWdfFJCT9euJ4Gw4VK9Z9y7y2BDl3\nakjgjmpixSMDL835frOTA19fwub0t3zuPAJ8HvXUomfttfsdxLPoO7IX5I0C\nsGJQ4B8SHQRwH4H0WLeHuvYXe7NR6Xy3zAiN4b0NAkuNn1oK+FNLzt6V9hdu\nb2fZUxrylLDonVyOqKLFyAXaSaS5aEGaESBpmaRCaQsLtPZCRmZtWY5qNMYt\niZexe3zkr5qvEeuGtH+bz2PmXAFOaJtyYZ1iwq0S7slaUBHxhHTE23klgvcj\n8TJZDbnb6hy+5Eh94UtneWUpwcpd8454+RXh3VfSR5JQ+AXKQSmpy4b4q47U\np+lEIClgT/zuHgzl/uFv1ks1eNTaaQ5FEhiA5O+a+FauklMcyjVnTzU3UWGd\nfqvTjyJwmSn2XubtOmGggAM40qkQ0Vub1rneB14e7pUqBb5B4fyiVxGNNYNr\noYRI\r\n=Nq1s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5bc5ebfea.0","@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/typography":"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/floating-label_5.0.0-canary.5bc5ebfea.0_1578524448312_0.3553251847776875","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/floating-label","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"7fd4ce3939d2228d7448ab982f6c114999fcad5d","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.1112b8def.0.tgz","fileCount":30,"integrity":"sha512-fN6pCEslK3QXEYyWuwUBm4y088550qlfwKfTAg/ZHKbwbq2nVjY6MO93+ONQd6jLBGgv/wVPyTIQfu++KnTH4Q==","signatures":[{"sig":"MEUCIDjV4QoioXF0z555LEGMYtjpmAnp4YhFi+BD8J00QdUUAiEAqZiVP0ZLTdMIGWv4X2lXBlTY2V59KWFmHaSz/+pYBSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6TDCRA9TVsSAnZWagAAlhgP/AoNslpziX/A1qWYQ7jd\nowFKkoBYLb/rXhFqNMk66fRgUoJGrB9QQHkShik/wH/eZq7XtRPohYu/tzDj\nSaFDbLVSUz9ZKLgXlmlMGJC8PumB1GNbp8j00MmBhguErlPBm8/3A2qDkdmc\n1PQkMrxJTt4z+cvKhYqeSrMtLcHEq4RfHZlhCDEBdnj5NL6L+eTY9dslNLUz\nWyr8vBj3DJkfTqd/equFA41HcyMezYUi6Hsblh1TvZ2/qH3f11HJiFRsuHt7\n/otlSDe5E0pOxY3x4kvYPyeBR+vZnkyHk1tAsvt5eZvBfV02HxMTit84f4ub\nydFp/02RN+O4ncfAzVTKYRAMICWT7UVcMHo7MUPCNgWnUFWnQOK75YNiusuy\nss2zCY7yBZDiAzOu4/1UxSyLfExPr1cYGCAZ8zlvXNuW4K4Lk+orgkP1Rhjv\njJhUaS+I8LJ1x3wigacZscoL3tCT+icdNoeNAbBgnLnMohLTS4ztt3nmxJIp\nZ69z7F1TLMQUkEnL1bT3nQDDIR2EAmAcPeLvROeyVRejEgQF7arR+bPnaBV2\nhlqMyJtB4AN0buPGk0zY25qis6QrfH3pJtw/PjU4Y6qNQl9hUH6qME9BsjGE\nzqcMJDkcZSSTvhNv62puvjzY6ehaxG2ayfmUtmmXYsYZaEEMI3EOsEKyoGa6\nk38j\r\n=L2S0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1112b8def.0","@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/typography":"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/floating-label_5.0.0-canary.1112b8def.0_1578607810898_0.4400543834866568","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/floating-label","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"5bfa23ad7ab1c0976f9e64504045644671fa6278","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.aab102017.0.tgz","fileCount":30,"integrity":"sha512-YUTavVJJuwWxLYcG7lnNKyvz47LtloHW83s8mhpJl92lf53MYM2+4VYF4+22LpNWUMc+d9iWMHHZR0QszYtA4w==","signatures":[{"sig":"MEYCIQDde5SexQIFUg9W7MavvqbTFX/Nczvg43yF027hD0n2HgIhAOuiNxl7FWVpoAwEzdRT3a6za67dANIiH4eVJIW2yozu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8FhCRA9TVsSAnZWagAA0C4P/3bHG6ly529YJUBe5no6\niPbhVCCrPyl53kee0wvcKJk4Jw0MguPuStHhbChrc+i95+y0AKElTnrTO70S\ngJPOmi5eqvpOpjgO6sXpb52KONo7BMGEGkPOulLbqpTXZpPgCATwP0plYI2S\nRjnc1sYhuX6M2ZjrsG4sr34TvWWuZv1WHHSbdocIqcV9/XbxJM9M48ke7QHC\nfy5zkQe/l+L6PyezLQHm6zwE3iRwHtztmc7gSrljiaB6uTYWYB2zkNLGVlDK\nE57D3CbCTphSTbM/iQGLijm8Z9OLtYXg6BGEL/+of7XltSCoTPo1btaK1H3j\n8JQBS3gyKrWA5MVhQJpGPMYWejfYrdQTareDMdHWEGI02fe4wAs4Cf8uN0NE\n8eCjdQd8SKv45E6uf7Xh2RrAiv20e5q/OGWViEr+SGy53zUwmZ6U7ihME/lS\n/s8Unf72s4z1f7ByyZDqGQSqHib0AwDr9iaSi+0JIrdT3JwZn+zY4EZNUNyz\ng1G0D34R+zp6npQTfTEeiRD4i9d6TWVgjYaFhfMDpUGngCnSrHdvUkE91in8\ncksnSHM+CdNExZtLFrLLEBAsJjIaZIPOrB4hpHjNEWimjKIPPwmDRqfdURtQ\n0uuMfgP1ktJuvBIc2+2QiK8BIfUXHaT72I0WtkMoWkRRk5QoO04OCWAiCHDv\nAEBH\r\n=1wGm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.aab102017.0","@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/typography":"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/floating-label_5.0.0-canary.aab102017.0_1578615136585_0.09386610961951547","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/floating-label","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"f229ad88d05cb3e67faffa39dbb28eec1af1d98e","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.426913342.0.tgz","fileCount":30,"integrity":"sha512-du3311HVefdnCTPQLPiC2807dsAgCts6QQgjfeYlrZMfqH83AC4BTqUvRdDuovEz59ttLKkLyH5Wj6iF8dgV2w==","signatures":[{"sig":"MEUCIDLwnd73c6IyDKEbPHNm/yFUh4XTEHitmWaKZCfOBGYXAiEA6AFAGZNBZwejZdiLaiH+8QBTgcSaaytBGpSL6YxvxAk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9bqCRA9TVsSAnZWagAAnXUP+QG8UtAlurcbsepcrQPL\n9RvtqM0NLCACYtcNRxcxuwghADRSi+Do5JZJLN9wvBbHm+ldNNubsqpQ60uC\nmwtgwDUrC5tWfSbsdH2nW2FRe64/tadketzfTfy6WNLdx8/KA6dBO0dh5JyW\nuKJZ0T9Pw3xLkSjIoCPZ2M2J0wGeftezxXb9zv0dGI6KmnsoooDaNnc3bMLJ\nLAmWCqE3/r71p7BS5K0rRuSINLRnsl4m6sQhsG45y0CY4cyCKQPm8LJhyahZ\nF9PLmz/sF53h9V/EVRNFn4bgvAIznthngSnkAIGc9A46i2QhnDcveKJ4N4M3\nR9T8JDqcZyjKZZZEkZXpaj1FTWzB3D2W16D6CKRsdytDee146lGIvDR9jJ7L\nir7J69I7z9wMcgH/GlnN6zMOJxHc2ALyfRLJ9L4q7wXj8YtF7O0ekuiGNlly\nBTM/R8H1A+oTrt3D1tKJlIyBVsJ/lsh0CZRqCEYnlaE9bODF4NOoG1orUFzH\nFo4b1WACsGKgmjJfVoOCorZhDmQ/o7PiqfkA7OWMeCcyodjy78BoRKFAsb8f\nsDwr7DlYEwtt147WegEuoY3mphf7kkYDreFdr6aLUEWzudFS3fMGSymReUry\nLmJ1ei9g4cNaMh200H47r3okzuvmmVICslnYNcI0g3RTAtjKK3kcPYunoIwO\nPkf+\r\n=MFBn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.426913342.0","@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/typography":"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/floating-label_5.0.0-canary.426913342.0_1578620649528_0.8314640747552307","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/floating-label","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"f959e394ef81a3c91465611c03acc6f798e10341","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.d4ea9a706.0.tgz","fileCount":30,"integrity":"sha512-Ck25Mmz4/2ZPqKzQ1KkEyzkb4Zc+vLQT/QN0fu2MGvcKzODzc5BjxvMd42Vzy3/pnxJqZmCbgsmiIF5WWOYAXQ==","signatures":[{"sig":"MEYCIQCacCKIyOu6hcPr3QdF9ZzKcWQSMQ4f5phoSbSwIK2wWAIhALEcskltcjFA6heAu0AuSAqIDUIk3g0TUfIG0bM0jGi0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLN8CRA9TVsSAnZWagAA+t0P/AlVf7DtDauWzFwRB/ht\neCtKNjiRK280MeZoG5CA9SreWVyza32AeeqC5QDASSfwa/tdw1V83QOUTOFc\nGrkVAnsJmbFPXrR4RZPtHjf6egxTHDNS6i8dtXxqGs7Fwtab4h/LhCCdqKoY\nupx+hc9Ca/J3CMiH2jCWXbr2VsfQ5EsBm+Qtw6Of9/thgRe7BqZtCNM0Rbaf\n1/Iz8MFaZAtNzXNA83ecZJxlW/R1PhUBYNSUpICX4b+XiHu59hKgqu5jxcM6\nxUMJVoM28yYKUpolyIkYdvdpcW+ytaEZsWEhyjEykTkXBeYpruHqwk9yNT/N\n/CpPNtxrdnkMX/NgkdXUcHjqlQF+B3D7iXGHN1GYhi9uIEUpzkfh5w7k/eq0\nKLNhe2ZGtGqvq9bbp6hcL7C/1r8OJca7Z+I/yjem2UEKuUi/ai6A00wtOTpZ\nvSgbP3lMasi1rEBgfQ/vWXDwpkQebUOqyrichv7kS3eEg0WC+l9+u1h6C95C\nJC26JT2d79FUFBVy3+fDYlP4Xit0DmZH1fS8o3ZKg7jdU9giFez6kSOlQ+8l\nV8b1hWUBDV3KM+2QhaTm8O8RedcYcrz5bAlCSEceccp/lo8G/6j1cgTIYViS\nMjt0rsp6+OzqjNHxlWVxT4y+ctoXOBFrVzMh97axkyN0O3ifJa5jPIzlAlhl\n+nzM\r\n=n+6g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d4ea9a706.0","@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/typography":"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/floating-label_5.0.0-canary.d4ea9a706.0_1578677115688_0.33812309546530805","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/floating-label","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"2cc54cf1d2e5c8602f23c61e30d1b76105561405","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.7d4ee2996.0.tgz","fileCount":30,"integrity":"sha512-kbAYzItX/f2mJX8R1ztE6mZUgS1nTkEhnQziM+cmgqeutnG/8t1rwYBrWfOvvhd+REQYTtflDZv221hqWI45pA==","signatures":[{"sig":"MEQCIEKG70cdpI7RRO12ELAoVLRrrHn12nw3k3DWvOWDh/GTAiAftjq2mFtR2ec+6B/XYSDgaiBqcF5u0kSEuEpeyE9SMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLrfCRA9TVsSAnZWagAAz4gP+gKrg/ARc5RxIF+R0ztE\nkxG+/tTYIFfAlGlTbR7LqxXFPO5lkBAUwUK6hlA1levicbjkdDSG617SHPLk\ncpFlTXBqKP32s4VLYXbKVpSRKnk6eh8Z0Vx6BhomeaEuW6u6+T079gmK8DSo\nOLh0yS9rbqQKs2O7UOl+yK9AXDUWRphRAglDntfl0GaYrDaRpWvjv54z4bxH\nknaGB0+WetsjaqZGm/PjGFc3r6OQHNQ7UL5R8/v9CubY3EXh/xV3ULDlcNgD\n0ehF2KJbdMJZgOWJe7Syr218Dcf2Iz+27eNFtl61d62Be1n5QdG3A95rLebd\n5hLiKIRvS20Mcj7mXhuyiO05hktbjKhxOt6i1UxtoxED3eXpp4Pc2nk7yQ32\nZW8FYm1zLVWsW09aW1ZpZ8L6yoQKe4Y+WvOILqkOJRM4Qe7TagbfxBLQOO3G\n/uDpRUDDrlIKEtomT9bidKNy34vmbzb1q/8IBVeMh2oR9cAWRWA0sjiwfEYT\nw9mjB7cPrjYSAz5etAqFEX9HpyKDVokA+RxWbAfI11qcALkfJ53Uej5JokOZ\nm6xYmW1rk151CnlHxu0t0J5UigMTxRTbxXCzSD5FQhJbIK5OvCgGqp+WNUX3\nShmx2e65FIVroHyd/EbxbrrssRpS+HlGX/3Y0MD2IyCnIWEtwV+7Q6oilMpP\nQp/p\r\n=0uen\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7d4ee2996.0","@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/typography":"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/floating-label_5.0.0-canary.7d4ee2996.0_1578679006229_0.45267375915821506","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/floating-label","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"7637d7028c1c6d0b82b463adc65aa1da7aa6f978","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.981ec9b6f.0.tgz","fileCount":30,"integrity":"sha512-ThQNj3xoRIVs9/T4bYfMtNsmwISrvnvXMap37ghNYCAsUiSBYWVmT+yIt68iOr7iYznlZoQT0AlJtWzrPU8aeA==","signatures":[{"sig":"MEYCIQCm4CrBni/kOw1qMDBDqO3I9EEe2tDV5ZCfU5CSjNNiNgIhAMe6rVKFGPZ1rA5A1sVP1DPsBtZ5o8cFFIc7tpOgUwKA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGM/tCRA9TVsSAnZWagAAVioQAI79r9oHpi+o+WWRf3D+\naOvRRcFr91f/eyznQFrFR5m0lLGe05pgDq2kRTjEarf5PvloLpPvsu/QlKUU\nWracbF62kgODaAX59jjH8lVXrTZLL2MPBMgyCwcWHAps82KE7dzTFtQ3Yuaf\nFhpeEiiNXw8p1K4TulzyHykTn4qbkIE7l4GaUlJ88ypQJKvM2AHC4Z5aFFAy\nt+BBblLMGCkqWvw35rWpWheW5yhnN9mA3Akhc/iL2bzMApjcPVb6OhSpl9CB\n+NJjm5CrmV7A6IeaDE96sz1O7uIpus0ImJ1FUZROUC/umlpi50CGgOxktPXo\nd/Nx9Qv5EomHuAmvEVdZEE2DcBo31ojjBV+qkMUP5S18LHDe2+jgUCL+hm3k\netFqOpOoB/mjd6OuZizWdjv7t3sErKa47Ynx4dAU4GTBmtXbxBQomp96h7vB\nverOEVLBs8sDPG7XBi1YX+6QwhkXN6EKUua6TTsiweiGRfOzMUK+lWpjeo2s\nXf4IA5xIb7fC+SoTP+mHfwqcStXnfmxYD4vklWJ1WBawkhd7IXnhPKzimmVR\nwJ9JHqZjF17PuPrvWG2F/xs7H6Iwj+NcDyuUqz+ml6I08DNJe0TAKSoeUOWL\neLyzqm0c9yLHcg6ZpiUa38cVuC5iouIBc2X8NoNpRpPY+s9rV5K6aUAgeQjk\nhoEr\r\n=ali3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.981ec9b6f.0","@material/rtl":"5.0.0-canary.981ec9b6f.0","@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/typography":"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/floating-label_5.0.0-canary.981ec9b6f.0_1578684397431_0.15218574535804374","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/floating-label","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"26e7cc45f250177ba9c9c4bbc24ef120bb3815af","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.737da83fc.0.tgz","fileCount":30,"integrity":"sha512-/svkzty7YhKnpruhQFtRBOn26B+q7Y0u+oBMVxdtML9GAjQHTjckms0GN6nfJkUZm+AQXBV68mSZ2/6NzC/aUA==","signatures":[{"sig":"MEUCIQCnTm74RrEpZMwVY/qBR6An8+bvPAgIDikH1oZJpNkHkwIgMqBvRLX8BMtFJjWZcEN4XBT+rY1NgYU6S7yAXT123vI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOo3CRA9TVsSAnZWagAAbucQAJhgC1XtbUOjhOLFwiEU\n+M/beXHBx0M2CkLymFNbVTF1WCDq3RZJSh8EJQsKgAZoE9UhAO5PKb7Ux8dS\n5yQPdrAybf8h++JVZ10vgswT+CSZSgnerlV5HUgFmf1exd/Qbw50cJONxjHM\n+HUNUs0lQEVdKGPMB53xNHdOE+SG8X6i8W1Lnv1M0UIAAvE7j3WD1NIRYCp5\nOyjFcJ7lsTRfkwF/N1naXz/KiGsD18EylhwIIJ53oIsydF1Dr6PwKkY9MyQq\nvJyXB7ytbmXK/uhejHXa8Vdb5CB7sZj9zX4HazQyRwTWzbZBg8md1n2mhzIP\nSm8QDwRDtkqxeAm/3dFF1y9ZgjFjrAjhUE9F73FyrKiVHx13qakmYC4Rl2wm\nmsG/hfjg6v6GOKaNOgeTRrXhJZQfdiOpwIEaNsN6mwX8rUJJeKHdfwl0Qg+c\n4VUYAjZpmLBw0xWlz9EejiR3ISaaeeVZunIVs6NH260LWycQ9H+ayxDed1pf\n1b2jrYfC2JuyD0n0Num3JL/lf1twuJobvAzAFuqgBi29IBqzjB4vo/sB3Q1l\nkFbJNWu5TIkFoQ58rY/r3/jTPj8buIR9/wEbbeGasbJSJYB74t3FCAGDbwIx\nV05VqXsOeMXp6sKM4uadnPeeBfC5FQl9ngmNmWy7H9UXlgIxZr7yL551octx\nR6lZ\r\n=eISF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.737da83fc.0","@material/rtl":"5.0.0-canary.737da83fc.0","@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/typography":"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/floating-label_5.0.0-canary.737da83fc.0_1578691126481_0.8387382797525724","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/floating-label","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"5ba2ac0357084c1d13d6d9179efaccae9c5016dc","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.aca8e6c18.0.tgz","fileCount":30,"integrity":"sha512-z0pX/+X0jWd2p3FEJ1TVHBsh3yEBMj6fRfslLGgfSvesPK6ruIkpieUCjbUQZBml21TpW0R1qhHTZuZEZg27nQ==","signatures":[{"sig":"MEUCIQDG2jKs/cnrU0nTBYLhS51X4IYOlJj6GS+iQuWJEW2dfQIgCaSO/oHc7+NrMbr2IxK54fymPXzCAexeVeiKdaPrFSY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMWTCRA9TVsSAnZWagAAiT0QAI3xWqb8Yq5B0U2PG5jx\n5QXcbE36mq/j19faDtIF6uhe1X1hhMFTogmYN+bysp7C1E64jLFIQe6cuym/\nCmyf689jglD6DXnEiCseoJyexAgH+dTgBXW2MgUrjaOIRyqZcZzMDHkUSZVJ\nypRBMQrGuSte2C2fb7NbcZU8Bn5ynygiII0zBNmlqnBFoXM//WEuHgCXJqlj\n8u5gF5l6wb0vb77XNKHkI9UWKFT5yHDZDEoWnd28LIWEUqEqeg/SZOV/T06S\noK1FqJtXeIb6WrB7deRXUfDMag4mW0LxbS21LO+v0tHzyG8PPk02DGuTP8ZN\n6bkWQ18scnyANHLDDGoSau1T1oBf/6e0k2r16fiVbqNYrD/U7F9aahvtAK9x\nUD4++NET9BaLoqtCoiH0TCYLLB/9+kZ5vX19lb7hzH2R+QP8A9wZeLSFjc1o\nMLFW8gsI4WRqhkWxjAKJ6JdVLI4HjoBac1oR9JAfS9paCU1DMDsSgxgdv46X\njCNKZHipId81qGrL32dkymml892d/eboYFHWtZdL5REu6Q915UXKN1bKZyTQ\nFEUXTU+R3snFbx7I0b6+va3P01jCFxRsIbhH7veT+kJmkqouwh/3uwRajmro\nu4G6BHfTyGs2EKfnv32Y22sIGjGNRKZeDxkvScBpXwzdvy23UcXk4gn1Eers\nOGJq\r\n=U7Vp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aca8e6c18.0","@material/rtl":"5.0.0-canary.aca8e6c18.0","@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/typography":"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/floating-label_5.0.0-canary.aca8e6c18.0_1578943891533_0.35734250387744826","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/floating-label","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"0b2bed98b8db41f3f5fe12c572047ded28804be2","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.c38d84e21.0.tgz","fileCount":30,"integrity":"sha512-h0cCKPskp9j7W5GdEtJbiMEIrOpzd+eR1E1jGPMp0/tS2MkWCTvN/LevSzrFherhloIxHCSHmr9Mp/qMJfGIjA==","signatures":[{"sig":"MEQCIDF47o2WjxOE16YxiJaVY0RgziVaGcp0HsjwjDNdnkI4AiBOvJtT4/waJQAINW5pqjcVvx29W8t4EzPUIXBbJjj9hA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOuCCRA9TVsSAnZWagAAL9QP/1q3iesVGpYp9Yhk7Hwy\nFKjmRK1SakMAOwXHPqqGOQ/QKga2WCGbTN0iqAsCzhDlIec4r7wf+F9wT+PN\nYYM87KlYGDaiMdLVwIZ+gh2UncSjO07y/IQHj6pN+Tz3Pw7SFd58kAma1l2h\nWyLYh00EMhRjKFkYUhziC+XNSR4OQMU9mBGHPaLK7GsPSydlsyHHaqmpl02u\nFLysS+cdBBmP+dmFh3Fid8TrxFVbO05BVXd9jgy5epadQHH5Hcx//beO56fH\nTSMM3cgsQOts1rEFi1kvwvvcNRbOPzouWOZqvMoxeUf4sP5uhnDm8mKCd2uC\n+OQD4pUMtUp6xAfTG3LYQi+5hbuoSsWmDLg7U2TObYBDGMpKzSwd57Sd5DRf\nlNRaMTCC/lrhuJwBoqaqC5GZBihjTmE0DQP2Db6yok3faSmM6LOFQ1lPhjpL\njIQmzq38obW5OtERe0N/zyeRfQVxf0PRoSJwDnJXYCW/4M2IWb5gWpZk8FR1\nyEEgVeSxKfZSLQxwLUMW62F7nw1uxPl5REjh5lPCuRwSdiKaJc8Tp+8Q8mo8\ni6cOBaLLRpD9L/t5JW99bJAbqT4m0rkWlsRAb+fZYaQmiza0Kbx7clrQ2BnF\nirUzIGCMIopxbL5dKIESP58Gx/IODH1HQbWrKv9+pGIwmMdlk0N8hUZNDDC1\nG7GO\r\n=gFK/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c38d84e21.0","@material/rtl":"5.0.0-canary.c38d84e21.0","@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/typography":"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/floating-label_5.0.0-canary.c38d84e21.0_1578953602258_0.7620336512389341","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/floating-label","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"5f6ead72368920ff24103db35b8f2dce6fa5da2f","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.a4db5fbad.0.tgz","fileCount":30,"integrity":"sha512-nEZ/pOCArC1J2VNhruGGvIohsVnu0mImmTjFFqsEkGioIQurnO+rdj7u1/1EfgBCL4IeNReCCaWItUJYpEIYVQ==","signatures":[{"sig":"MEYCIQC/UqI5PXSyHkY9x0aJ/UY7AFlYlhbpGQfsZiaXYRQ/agIhAJfH87alENvs0JqXnsrswEDWyAYIxpsYFH8pPwd8+iJ4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSQ5CRA9TVsSAnZWagAAtRYP/3w17ztuPzEYO/OhZl0C\n9EnUJk65ilSlC58u/rsRUbapG7eO2P1gEz6TQV1dV84y6TUulx5m7PkN0sz3\n9exTTecPNxaaUP9i7ONDSikimqKkSMZICBqylWPvUTXhzfTwlalYKQFCVaTb\nOr7GersReEmy5bt3nxlrFw6MNmL8QX7zbUoIhCdjIpqHYPHZ+Own5gaGstDt\n4WJMDf/DTteMOQfqDF1Bjr4FIrXDvFkFcPmH+6RTMkmvBrUE2jMyr8WWQy+B\nSkgIObEDPbspf+0M/ZJtYvCwE79agO7wX/QA/7P7fpfz4Q8hwMaPzeLFes5O\n46JingoVfrVLClzHagfSf9jeHtlX47FAc7oZjmL9f71ueDtsTh8YEeajHh3H\nuaswL5PyDxXWie8O1pKm4BgTjxECCWkb5Ka2an1c+I5MmB/PEqJkyZ9SFUqE\n1t5aaLx3Heu3hkvDK24oZ8xOIHwgW4xLwCx3beMTtR28oMGRsVAKI2V8V9Cn\nTLfKQsGjGRJHY0urnbeU8aXX/dpkjK8wQni7OYawSWyF1+iSzUNej65aeg6P\nwFVBMHtaFV31mgsZ/y5q6gpAxAXdYq400RohnC3EGjQdn0J+gK3Y+UjcvMgO\nsv0bYYpEDdOKTuOIMaOYAJioV1tEaYX9EGMTB8OCqQVJ60CIWccjNrblUKqo\nn96y\r\n=evJq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a4db5fbad.0","@material/rtl":"5.0.0-canary.a4db5fbad.0","@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/typography":"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/floating-label_5.0.0-canary.a4db5fbad.0_1578968120795_0.29646754853619584","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/floating-label","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"de4b6ca0a509a4e754b1cbcf882569644f9bc879","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.faa9af310.0.tgz","fileCount":33,"integrity":"sha512-Qh4fLMmsMAaOwVotoOog1ZUd3P4QiHdzG42Y7BcJ+wWHArlL5gDLnP6cNuxFKhaXNQQvKiy010LSibLxhQ/PGQ==","signatures":[{"sig":"MEQCIGlnUN8f3x7i1LKERQpbvyfUHbzY0xqQOjhMfyI7S1EwAiBSxuKFQXxkIP6oqintrjcnrKu1d5rWyqQw8TY/4r31dA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfHZCRA9TVsSAnZWagAAZe8P/14N159+wtSDOdBPGtaq\nW1Qn/4BOYhkjuG2l6t+hysjCpExY5UAGxw7CzhBOLkLkbWIYiExqUsYF4yWC\niUjhLySGlmVc8oup6VMyZH/Ctay9R5Og8M9BA72qi04L1wTs8bIRXlWRnHlK\nA/Bm0ZYwf/SZqKHX83wJvKe2wGtvD670hfZ9tkVs7GDJAqtiKBrpoZdI3ejJ\n6Qk3I6d/9gmLm6WGQXPMc8V0wN5XvsgVzOB3jJ9PY8sIdX6bLGLXe7G1mlLt\n0RAmrsQc89KMcNeNlTxeV/YseWhN5wHeBrgJJKdU5qMBAYL4fvuaoqi4pGh2\n5Dm3G5V3bFC+zvZzovz3TFgIc1Fx3Qng2UoZw+axOz3xtcKSEGdFi4D/2wRb\np3lQKfLZMsp3pdhou1lTVJCeSafQZP2JHQI/xZC7vtWZr+EomSY+BulB7+3Y\nOqu1j1FwfqHBdEB3eHBn6/gZaMqd9MWfAnwVdh0EvkeJ5i0wWptkV/zoXKSX\nVAMdJNFgsQIWoYIYrnfr+jJpg/YcPfPcBIb7bRrVPz5MQx+ru5W/BsuNywoQ\npj8Zwj+H8+QOrLz4k7tL96BebnjdwgzoHOocNSVt3ZxCd4w7/HN/qy8kdc7p\ntEoOnJU+qoaQmbigKJ2r+0zPSNayPpJWIx2qgGMEE7LVGTEPdfpi/Dc1pTFO\nHNMR\r\n=5KrI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.faa9af310.0","@material/rtl":"5.0.0-canary.faa9af310.0","@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/typography":"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/floating-label_5.0.0-canary.faa9af310.0_1579020760839_0.7962187518041473","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/floating-label","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"8639cc05ff664d8ed3197e3228ebfa45845c5b9d","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.60354c577.0.tgz","fileCount":33,"integrity":"sha512-LYdZ0dnAXRGex8RTD5Na/fRSH1WEIMncTfaC4q7GDrnhjdw8Q5AbZe4p1OXqwApDvfBNasGU8msBf1XY8fFSUg==","signatures":[{"sig":"MEUCIQCabQ3DFnuha9i1ykSNZsQfIBkD9h2j3G3Bnxpu6Y3o3AIgT/8NyVKRfhiEZbGEasdPKIHWdXYh7ffOJKTnauzRhuQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkSiCRA9TVsSAnZWagAAiXgP/2rfHGZj+GiScbwfR/kQ\ndRiDocZE8dblAmDRdp+b1htlD7ETKp9MSsIn9pndqB2qHkck1DHotsC9NWNy\nFIU9mGhT7h50o8MoBs0bvU9u4M6lVmb//n9389hM3sexVl31gc5SaTONBTg0\nmy25U2uV+oOOGVnwGi9dIqoUT5/MV26I7wYnslQnnxDZR9G7nC676Hg54Ufd\nuSDGEePiHCrhSiWFijggiRQij9cOWCCqYikAIb3icd4OXr74w3VO8oHvykAd\nlCFPSuGi98kI1Miq5+BvoVw9+MkN74G1f5wuHNgbtleB+SFkKLc3AahSdtED\nCmnl6TQj1rI5DeAhDbU/x7mAsm74fglZRjyykWW8C82bNBBZagJ7YQex9K8x\ncDzBkdJ019VdlwFAPjM/o9sIoEL8OiN99/8TbPDowkEinOCQtyEETZa20LGG\n3seUU3v5SYk0AV3vtbV7FfmTioMLPoOC/hJ0mU8eU8ss1Thwj4JUWqZtWXWs\neRx16eD9TFLOUIncMJqlmGEbJHuAgGY5jRWsQwGmiYDHsoijFjcZXcvBUYce\nQOBosZqOZU+PcRn8powl7S/q9lAiR/mdRNfyMltnwxKAdkNLpEG3eeNvjuqg\nbB83mQM00aPN0VRD5A5IWhhaZa8Pg7ctTR02ech8zwO6WcfQvxNigCN4+rDX\n1Hb2\r\n=37Fr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.60354c577.0","@material/rtl":"5.0.0-canary.60354c577.0","@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/typography":"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/floating-label_5.0.0-canary.60354c577.0_1579041953623_0.6030251433126481","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/floating-label","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"b9bd762409d3d8637420c9e77b1d3886a932933e","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.d07c78daa.0.tgz","fileCount":33,"integrity":"sha512-rBBtACVEVzP9JWDQNVGd8q9I3PkzxHQw5YK3vWs5yuiWHYC8ErjRn9GOzOUv06Qct/jkDgU7NwAV8/7BkED+xA==","signatures":[{"sig":"MEYCIQDEbbWHMcALmU6L+zijcYV5SNinAK2chvSj9VAq9teXwAIhAP0c4JLMAwXLEmpUSIPCF2AmbZfCFkKa3su0lc/kOjLf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlD0CRA9TVsSAnZWagAAiTkQAIh442QzdE77EusYqrct\ndy3O61duSbL60ZiCCzeL5GFS4jpDqMJUa49PhsCiuLF1V2eDCS4gxtUKakpp\ns20Gx32vB9/ExcXSCBLF6Q+4yuXr7g9fYhXNJEmod5eIrsfQDfkcPF2KJMmJ\ni55X5j4U5ON8DtcnIZiwSjsi86ANoIUrazqKSEupsqRXc92mGdN5AWf6NuX8\nsEYtvkZE3IG/OG04A5Z/cJYihMIR4juxgUOTrr39p7/96JgUNGox+Uu1+UN3\neHuTJzquoNjxnGKOy9FoVV7ci6JMbGZJEywWuGb3vUzEUGJFOIl2CEiCS/CT\nYevWtn4P+bD+XD7b/O4bOVsnIWLb/+DBPIUYsvYoRFK2jjoj7jcF3qEO8jfN\nQJl9UcUAkSPTQpmz2LKbcxJB1OeoYl8mC0P2v3Ndu9//1NbmszgqvVfTZCC7\nZTdCtPm7BgR0CCup9RTC1+squAGdzI85CBmkO5G9m7R4/WCUnwlpe1mWVAJC\nRQZA4XxEtU3dAjwyYdcUlJseEZbtAhJiP30rI7Ig0HOZKSc68LV/n0rbyDsa\nW32Y0Vr5EICtBEl693v6jFUToyYG0qK5tCSnRifZUzUxTEgD42nWqXtjzYcz\ndHuz4jpD38Drc224EWs4zhsls0fUSsafVOH6vafIrjaSO2rz5n/YI1hbUNl7\npwmj\r\n=qbaj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d07c78daa.0","@material/rtl":"5.0.0-canary.d07c78daa.0","@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/typography":"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/floating-label_5.0.0-canary.d07c78daa.0_1579045108399_0.7505103492039926","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/floating-label","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"8f37be18edd8019bed73670f64bb93e231ab7dba","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":33,"integrity":"sha512-dJV7K7fy2DjN72gzrhvJpFQtOxcdaS5rTTOQCUb4AkDmmAuLlYbDsEyaPymAejvzmNyrpl6QFXcqmxqnH/cGzA==","signatures":[{"sig":"MEUCIFh4adVWCeIIM0w0lIpdM4er8Iv53YB600NwPXNjPL7zAiEAgtOZpR2pm471Askd4NpQXr0s4baIaatUE+oKviAlSrY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm4jCRA9TVsSAnZWagAAG1IQAIFX5Yl1aSWj1ahmbb2M\nIMk8d4V3ZM0OWLexoaI7c+3PT3wMfzVkh+gYSBgqeJfeCZUUvERbW6/IzbYb\nqXQVD9QW5waK6J6J3Iz7K7wAKkAanghRRUE9gJmNsoMh/924G4iNbu1r7zNL\n7oUj3k1gltGacnsdhIUbxrjRG6EamjGDV2cADL6bpQ1fsx5ZatF8djrhaehm\n3U+I1lOwbWDSHoY3/kgdlmvx9Dq8xH99Qk+Nd67PNytwldW88itWY8pMlwKN\ntjD8AG+ldMjwxxtAOKfPcgVveiuHeGdVbvENsnloCrxo09u2SuPhGvfXH5HB\n5PqrJVbrSKpIx6DnTOpIHdNOqV6H7tWEudMeGH9ie/1X3Qh/0hluILHHzdin\n+mMj2eZweks45HF4p8khyFpErHTvzpIaDQuzcF6r5NjCIJLNxzQkSQuHyS/8\nBCPRKlieL7FbWuNe3zgteTsPrA8JXQO1GJzmMRgxBb4FchkLHxS6BbOYHp9z\nVosICLuspn/HxNNGu2D+p/oqf759H2QXlEw9xj/h5ZqB0YsfNmeNREllOvHQ\nvXnaus6kaAVStBWLEgx9pjV4gbkRtOXGn7Qkvdas3miJjmopyKR4BEgYV44f\nCzL71Io3yLXlZXwcsacQAz7QATMhsL1iXVPo5Ruy5yvtlx2mo7vUoNh44bcu\n3KlZ\r\n=NjBa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n Hint Text \n
\n \n```\n\n> NOTE: This method also works with ``.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.\n`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.\n`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.\n`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.\n`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`getWidth() => number` | Returns the width of the label element.\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-floating-label"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web floating-label component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.8ddd5c6dc.0","@material/rtl":"5.0.0-canary.8ddd5c6dc.0","@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/typography":"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/floating-label_5.0.0-canary.8ddd5c6dc.0_1579052579311_0.2701247717778459","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/floating-label","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","floatinglabel","floating label"],"license":"MIT","_id":"@material/floating-label@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":"3926ed1b93e6431a8b2b2acd71b17cedeb274701","tarball":"https://registry.npmjs.org/@material/floating-label/-/floating-label-5.0.0-canary.a9511d870.0.tgz","fileCount":33,"integrity":"sha512-eMNkHckKvrjXqfAyAMHBoYcrbNays6DDTxQLloJK8NNss8k60HmoF4DdZClGNwj/rn+DWI4Hn5lENApyjxvruQ==","signatures":[{"sig":"MEQCICpE5AEOQp3/tN/0CXllTe0Lg0yk16KFOqP3+RJfnxWlAiB//vvvW4WWFPCl9OEXWmbfqENm8nNCW8UeUeetrSnWqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2OWCRA9TVsSAnZWagAAG8wP/ROwM3CJOgPutCSsy0iF\nOgE/p9LV0KaDGk0ZyMCbOAcld0haWV8Fw4LsJ50UOSzv/VkWzbHu2zOiWHDE\nozSrrwrgA3mDi8HsEWYVBg8fPUAOs0nxIrMm0KxTcxAF3A7bv7qcH98TqZm1\nFgm7qnYi2WH4bFQl8n4tAiHKyS+tv5sbXdgsOmBAfPovRHUBTCG9QibXqwsA\nL5M+IMhBJ4SYKI8pgK+rTyKpae2MhiJLscterBDMGPzfYQdK4fp061MvDx6F\niInvopRAWxEQ/KJneXW7VYjarMZbcDSb6Q7h86pV9mrk60RuWW/Ht49tsQTj\nKIXDdHiPcZRzTpz9MnOFWzz6Awl/+I8rfqrHdyT8HH/qrVTKuiqct9HfnQeh\nhnot2VFJS0endQ0ej3mfMk5IYSfS2DjwP4IFvl0Fk6kqh3nIqMlVNmeX9625\nSO5Q1LCI8iFOeU0JTHML9jInJNxcLaJ4PaEqMExwu5XpPE8MOZJ5qXuUj8JC\nMKKiyV8WzqYfFIjX3t97GSzsmViX/VvlPBhxwPftLsygsbJFK6h9YbzvjCB/\nAix0ofzE1HqpwUMID3SFeQ0mZp8GITcKs4aS3mQbr4EqcRnYKI+RdWuwrPYr\nsbrSLmcTNn0ZkcAk8ZzLqmJdXm28wQm6fuIAXORKCXEx0h7TJiQa4VMJN9T6\ngxYP\r\n=qYFo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.floatingLabel.js","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","readme":"\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\nHint text \n```\n\n### Styles\n\n```scss\n@import \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Variants\n\n### Avoid Dynamic ID Generation\n\nIf you're using the JavaScript-enabled version of floating label, you can avoid needing to assign\na unique `id` to each ``:\n\n```html\n\n