{"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","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, 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## 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":"Apache-2.0","_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.4.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"}],"_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"},"_id":"@material/floating-label@0.39.0-0","version":"0.39.0-0"}