{"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","name":"@material/floating-label","types":"dist/mdc.floatingLabel.d.ts","module":"index.js","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, 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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic 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### 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 `<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> NOTE: This method also works with `<select>`.\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","license":"MIT","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.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":"6.8.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":"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"}],"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"},"_id":"@material/floating-label@1.0.0-0","version":"1.0.0-0"}