{"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","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":"kfranqueiro","email":"kenneth.franqueiro@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.7.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.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"},"_id":"@material/floating-label@1.0.0-1","version":"1.0.0-1"}