{"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","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`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","license":"MIT","_npmUser":{"name":"abhiomkar","email":"abhiomkar@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":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","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":"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"},"_id":"@material/floating-label@3.0.0-alpha.1","version":"3.0.0-alpha.1"}