{"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","name":"@material/floating-label","readme":"<!--docs:\ntitle: \"Floating Label\"\nlayout: detail\nsection: components\nexcerpt: \"An animated text caption for a text field or select.\"\npath: /catalog/input-controls/floating-label/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/text-fields.html#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n</ul>\n\n## Usage\n\n### HTML Structure\n\n```html\n<label class=\"mdc-floating-label\" for=\"my-text-field-id\">Hint text</label>\n```\n\n### Usage within `mdc-text-field`\n\n```html\n<div class=\"mdc-text-field\">\n  <input type=\"text\" id=\"my-text-field-id\" class=\"mdc-text-field__input\">\n  <label class=\"mdc-floating-label\" for=\"my-text-field-id\">Hint text</label>\n  <div class=\"mdc-text-field__bottom-line\"></div>\n</div>\n```\n\n<!-- TODO(mattgoo): add ### Usage within `mdc-select` once select uses mdc-floating-label -->\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 `<input>` by wrapping `mdc-text-field__input` within a `<label>`:\n\n```html\n<label class=\"mdc-text-field\">\n  <input type=\"text\" class=\"mdc-text-field__input\">\n  <span class=\"mdc-floating-label\">Hint Text</span>\n  <div class=\"mdc-text-field__bottom-line\"></div>\n</label>\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","license":"Apache-2.0","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","floatinglabel","floating label"],"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":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.35.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/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"},"_id":"@material/floating-label@0.35.0","version":"0.35.0"}